CSS3的background-size

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;
   }

效果：

前面的DEMO中大家都知道，例子中使用的背景图片是50px*50px;而现在将元素改成了30px*30px；效果中可以看到背景图片此时的尺寸也相应的缩小适合了元素容器的尺寸。

从上面的几个DEMO效果可以看出，只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形夫真，所以大家使用时需要仔细考虑好，以免给你的制作带来不良效果。