### **一、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区域的背景将被裁剪掉；