原文地址：http://blog.csdn.net/wd4java/article/details/50537562
.personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-login.png', sizingMethod='scale'); }
做響應式布局的時候，如果有背景圖，我們當然希望他能夠全屏100%顯示，這樣顯得頁面非常的爆滿，不過這又出現了一個問題，圖片的尺寸多大合適呢，現在的瀏覽器分辨率參差不齊，對於Firefox等高級的瀏覽器，使用Background-size設置為100%即可，而IE瀏覽器就需要不同設置。
在Firefox中，只需要用background-size則可以控制其隨容器的大小而自動伸縮
picLUp{
background:url(logo.png)no-repeat;
width:100%;height:40%;
background-size:100%100%;
}
在這樣的CSS控制之下，則可以在Firefox中達到背景圖片隨父容器大小而自動變化，達到填充效果，但是在IE之下，你會發現上面的CSS控制會很不理想，它並不會因為你有了background-size:100% 100%;而自動縮放，圖片原本怎么樣就怎么樣顯示，如果容器比圖片小，則只能顯示圖上的一部分，那么要達到這個效果，則需要使用IE特有的濾鏡。
AlphaImageLoader
兼容性
IE5.5+
語法
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)格式的圖片完全透明區域后面的內容。
hello{
width:10%;
height:50%;
position:absolute;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');
}
通過上面兩種方法的介紹，我們就可以完美兼容所有的瀏覽器，使用CSS讓背景圖100%填充。