频道栏目
首页 > 资讯 > HTML/CSS > 正文

CSS3背景图片尺寸属性

17-01-12        来源:[db:作者]  
收藏   我要投稿

1、background-origin 规定 background-position 属性相对于什么位置来定位

a、padding-box背景图像相对于内边距框来定位

b、border-box背景图像相对于边框盒来定位

c、content-box背景图像相对于内容框来定位

2、background-clip规定背景的绘制区域,也就是背景图片显示的区域

a、border-box背景被裁剪到边框盒

b、padding-box背景被裁剪到内边距框

c、content-box背景被裁剪到内容框

3、background-size 规定背景图像的尺寸

a、length设置背景图像的宽度和高度(第一个值为宽度,第二个值为高度)

b、percentage以父元素的百分比来设置背景图像的宽度和高度(第一个值为宽度,第二个值为高度)

c、cover按比例调整背景图片,背景图片会自适应铺满整个背景区域。如果图片大于背景区域,会有部分显示不出来,而如果背景区域大于图片,则会留有空白。(图片会按比例缩小或放大适应背景区域的宽高,只要有一个满足则不在缩放)

d、contain按比例调整背景图片,背景图片会自适应铺满整个背景区域,图片宽高会按比例缩放适应背景区域,以保证图片完全显示在背景区域内,这样背景区域一般会有空白,与cover相反。

我们在前端开发中背景图片常常使用一张大图,然后设置背景图片的尺寸为cover,然后这个背景图片的位置居中,background-position: center,这样图片虽然有一部分显示不出来,但是主要的内容却显示出来了。

相关TAG标签
上一篇:submit for review后,状态没有如预期的变更为waiting for review,而是Waiting for Export Compliance?
下一篇:jQuery中的attr()和prop()的区别和联系
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站