CSS3 background-size讓背景圖寸尺大小可控

　　background-size是CSS3提供的一個新特性，它能夠讓你爲所欲爲的控制背景圖的尺寸大小。先簡要的看看 background-size的用法。咱們知道在CSS2中，背景圖的大小在樣式中是不可控的，好比要想使得背景圖填充滿某個區域，你要麼從新作賬大點的圖，要麼就只能讓它以平鋪的方式來填充。

　　現在background-size讓你既能夠直接縮放背景圖來填充滿這個區域，也能夠讓你先給背景圖設置大小，而後以設置好的尺寸去平鋪滿這個區域。

　　一塊兒來認識認識background-size吧。

　　background-size的值類型：

　　background-size須要1個或2個值，這些值既能夠是像素px，也能夠是百分比%或auto，還能夠是特定值cover, contain。

　　background-size的值定義：

　　background-size能夠設置2個值，1個爲必填，1個爲可選。
　　其中第1個值用於指定背景圖的width，第2個值用於指定背景圖的height，若是隻給background-size設置1個值，則第2個值默認爲auto（cover和contain特定值除外）。

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px;
}

　　等價於：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px auto;
}

　　查看具體DEMO: background-size的值定義。當你使用firebug抓取到那個實例節點時，你會發現第二個值被自動加上了而且值爲auto。固然，你也能夠手動將第2個值設置爲auto，而後與該DEMO的實例對比，它們的效果將是相同的。

　　background-size的特定值：

1. cover: 保持圖像自己的寬高比例，將圖片縮放到正好徹底覆蓋定義背景的區域；
2. contain: 保持圖像自己的寬高比例，將圖片縮放到寬度或高度正好適應定義背景的區域；

cover值：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:cover;
}

contain值：

div{    background-image:url(test.png);    background-repeat:no-repeat;    background-size:contain; }