CSS3的background-size

浏览数：23 / 时间：2015年06月09日

DEMO一、background-size:auto;

我来看第一个DEMO,在前面的DEMO上加上和个class名为"backgroundSizeAuto",在这个Demo上我们应用上前面所示的背景，并把background-size取值为auto,

  .backgroundSizeAuto {					
     -moz-background-size: auto;
     -webkit-background-size: auto;
     -o-background-size: auto;
     background-size: auto;
  }

效果：

技术分享

效果中明显得知，这张背景图完全没有作出任何变化，前面也说过，auto值就是使用背景图保持原样，不做任何参数修改，这个效果就相当于没加background-size效果一样。

Demo二、background-size:<length>:

在这个DEMO中，给background-size一个具体的值，比如说这里取值为150px 80px;如：

  .backgroundLength {
    -moz-background-size: 150px 80px;
    -webkit-background-size: 150px 80px;
    -o-background-size: 150px 80px;
    background-size: 150px 80px;
}

效果：

技术分享

从效果图中告诉我们，此时背景图片由当时的50px*50px变成了150px*80px,此时背景图片也变形失真了。上面是取值为两个值时，第一个值重新变成了背景图片的长度值，而第二个值也相应变成了背景图片的高度值；但我们如果职取一个值时，那么此时的值将同时定义给背景图片的宽和高，相当于background-size:150px auto.另一个其只能了两个值，决不会有第三个值出现，如果有第三个值出现，你就用错了，将无任何效果显示。

DEMO三、background-size:<percentage>:

现在将ＤＥＭＯ的值设置成百分数，我这里取了一个80% 50%:

   .backgroundPer {
	-moz-background-size:80% 50%;
	-webkit-background-size:80% 50%;
	-o-background-size:80% 50%;
	background-size:80% 50%;
   }

效果：

技术分享

同样效果告诉我们，图片会改变大小，但这里有一点需要特别注意，图片大小不是按背景图片大小的百分数来计算，而是装截背景图的元素百分比计算，就拿我们这个DEMO来说，div.demo的大小是200px的宽100px的高，此时的背景图片大小将根据div.demo的宽和高的百分比计算，这样一来，背景图片的宽就是200px*80%等于160px;而背景图片的高同样是100px*50%等于50px；如果有内边距的话还需要加上padding的值一起计算。另外当其只取一个值时，那么宽度和高度将相同，相当于background-size: 80％ auto。

ＤＥＭＯ二和DEMO三分别是以固定值和百分比来改变background-image的尺寸，同进还可以两种取值一起使用，如：

   .backgroundLengthPre {
	-moz-background-size: 150px 80%;
	-webkit-background-size: 150px 80%;
	-o-background-size: 150px 80%;
	background-size: 150px 80%;
   }

效果：

技术分享

DEMO四、background-size: cover;

   .backgroundCover {
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
   }

效果：

技术分享

效果图再次证明前面所讲的，background-size取值为cover时，背景图片自己会放大到适合容器的尺寸，在这里我需提示的是，在ＩＥ中有一个滤镜是类似于cover的功能，

   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’);
   -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’)”;

如果使用滤镜的话，background-size:cover；只有在IE6中不支持了。

DEMO五、background-size:contain;

ＤＥＭＯ三中的cover是把背景图片放大到适合元素容器的尺寸，这时的contain刚好是跟cover相反，是把背景图片缩小到适合元素容器的尺寸，如：

   .backgroundSizeContain {
	width: 30px;
	height: 30px;
        -moz-background-size: contain;
	-webkit-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
   }