### **一、background-size背景图像的尺寸** background-size1个或2个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。 <br/> <br/> #### **属性** **length**:用**像素(px)**设置背景图像的高度和宽度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值默认为"auto"。 <br/> <br/> **percentage**(百分比):以父元素的百分比来设置背景图像的宽度和高度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值默认为"auto"。 <br/> <br/> **cover**:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。宽高等比例缩放,背景图像的某些部分可能会超出背景区域,无法显示在背景区域中 <br/> <br/> **contain**:把背景图像扩展至最大尺寸,宽高等比例缩放,使宽度和高度完全适应背景区域,图像会完全显示在背景区域,如宽度或高度其中一条边已完全覆盖对应的区域,另一条边没有覆盖,则不会在缩放,会留有空白。 <br/> <br/> **背景图片全屏**显示css3代码: 用background-size可以实现这个效果,用fixed(background-attachment 属性)和center(background-position 属性)定位背景图,然后用background-size来使图片铺满,具体css如下: ~~~ .test { background: url(bg.jpg) no-repeat center center fixed; -webkit-background–size: cover; -moz-background–size: cover; -o-background–size: cover; background–size: cover; } ~~~ 适用于以下浏览器 Safari 3+ Chrome IE 9+ Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover) Firefox 3.6+ 这里ie8及以下版本不支持,这些蛋疼浏览器则需要添加下面的css来设置兼容 ~~~ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.bg.jpg’, sizingMethod=’scale’); -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bg.jpg’, sizingMethod=’scale’)”; ~~~ 这个用滤镜来兼容的写法并不是很完美,首先是图片路径,这里只能是相对于根目录的路径,或者用绝对路径;然后是图片纵横比改变了,是拉伸铺满的形式。尽管如此,总比留空白好多了吧 <br/> <br/> <br/> ### **二、background-origin** 相对于内容框来定位背景图像 background-origin: padding-box|border-box|content-box; padding-box:从内边距(padding)区域开始显示背景;(默认值) border-box:从边框区(border)域开始显示背景; content-box: 从内容区域(即去除边框和内边距)区域开始背景。 `注意:background-origin主要是用来控制背景图片的background-position位置,并且其只能控制背景图片。` <br/> <br/> <br/> ### **三、Background-clip** 主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景显示区域 **语法:** background-clip: border-box|padding-box|content-box; border-box:背景在border边框开始显示,从border向外裁剪,也就是超出边框部分将被裁剪掉。(默认值) padding-box:景在padding开始显示,从padding区域向外裁剪,超过padding区域的背景将被裁剪掉; content-box:背景在内容content区域开始显示,从content区域向外裁剪,超过context区域的背景将被裁剪掉;