做響應式佈局的時候，如果有背景圖，我們當然希望他能夠全屏100%顯示，這樣顯得頁面非常的爆滿，不過這又出現了一個問題，圖片的尺寸多大合適呢，現在的瀏覽器解析度參差不齊，對於Firefox等高階的瀏覽器，使用Background-size設定為100%即可，而IE瀏覽器就需要不同設定。

在Firefox中，只需要用background-size則可以控制其隨容器的大小而自動伸縮

1 picLUp{
2     background:url(logo.png)no-repeat;
3     width:100%;height:40%;
4     background-size:100%100%;
 
5 }

在這樣的CSS控制之下，則可以在Firefox中達到背景圖片隨父容器大小而自動變化，達到填充效果，但是在IE之下，你會發現上面的CSS控制會很不理想，它並不會因為你有了background-size:100% 100%;而自動縮放，圖片原本怎麼樣就怎麼樣顯示，如果容器比圖片小，則只能顯示圖上的一部分，那麼要達到這個效果，則需要使用IE特有的濾鏡。

語法

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性

• enabled:　可選項。布林值(Boolean)。設定或檢索濾鏡是否啟用。true | false
• true:　預設值。濾鏡啟用。
• false:　濾鏡被禁止。
• sizingMethod:　可選項。字串(String)。設定或檢索濾鏡作用的物件的圖片在物件容器邊界內的顯示方式。
• crop:　剪下圖片以適應物件尺寸。
• image:　預設值。增大或減小物件的尺寸邊界以適應圖片的尺寸。
• scale:　縮放圖片以適應物件的尺寸邊界。
• src:　必選項。字串(String)。使用絕對或相對 url 地址指定背景影象。假如忽略此引數，濾鏡將不會作用。

特性

• Enabled:　可讀寫。布林值(Boolean)。參閱 enabled 屬性。
• sizingMethod:　可讀寫。字串(String)。參閱 sizingMethod 屬性。
• src:　可讀寫。字串(String)。參閱 src 屬性。

說明

在物件容器邊界內，在物件的背景和內容之間顯示一張圖片。並提供對此圖片的剪下和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文字。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區域後面的內容。

1 hello{
2     width:10%;
3     height:50%;
4     position:absolute;
5     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');

通過上面兩種方法的介紹，我們就可以完美相容所有的瀏覽器，使用CSS讓背景圖100%填充。

附上background-size屬性：

background-size:規定背景影象的尺寸

　　1.length:設定背景影象的高度和寬度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為 "auto"。

　　2.percentage:以父元素的百分比來設定背景影象的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為 "auto"。

　　3.cover:把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。

　　4.contain:把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。

background-position：屬性設定背景影象的起始位置。

　　1.有left,top,right,bottom,center五個值組合顯示位置。如果只寫第一個，第二個省略預設center。

　　2.x% y%:第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。

　　3.Xpx Ypx: 第一個值是水平位置，第二個值是垂直位置。