在HTML中通過CSS設(shè)置背景圖片自適應(yīng)瀏覽器大小，該如何實現(xiàn)？
用background-size屬性，你想給他多大的百分比都可以，不設(shè)置表示默認(rèn)圖片大小，設(shè)置100%表示全屏顯示圖片，按比例縮小或者放大。
例如：
.picLUp{background:url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png) no-repeat;width:100%;height:40%;background-size:100%100%;}
這樣就可以實現(xiàn)背景圖片自適應(yīng)父容器大小而自動變化，達(dá)到填充效果。 但是，圖片會被拉伸填充，這并不是我們想要的效果，那么我們可以不設(shè)置100%參數(shù)，而是使用cover參數(shù)。
background-size:cover
設(shè)置cover參數(shù)以后，背景圖會按比例縮放填充滿整個背景。
如果使用IE瀏覽器你會發(fā)現(xiàn)，上面的background-size:100% 100%;并沒有起到作用，圖片原本是怎樣就怎樣顯示，比較大就只能顯示一部分。
所以這時需要使用IE特有的濾鏡 AlphaImageLoader 兼容性在IE5.5+以上版本的瀏覽器上都可以完美運行。
AlphaImageLoader 語法:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
AlphaImageLoader 屬性：
enabled: 可選項。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true|false_ true: 默認(rèn)值。濾鏡激活。
false: 濾鏡被禁止。
sizingMethod: 可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop: 剪切圖片以適應(yīng)對象尺寸。
image: 默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
scale: 縮放圖片以適應(yīng)對象的尺寸邊界。
src: 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會作用。
特性:
Enabled: 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod: 可讀寫。字符串(String)。參閱 sizingMethod 屬性。
src: 可讀寫。字符串(String)。參閱 src 屬性。
說明:
在對象容器邊界內(nèi)，在對象的背景和內(nèi)容之間顯示一張圖片。并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區(qū)域后面的內(nèi)容。
hello{width:10%;height:50%;position:absolute;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.w3cschool.cn/attachments/knowledge/201610/14632.png',sizingMethod='scale');}
這樣我們就可以完美兼容絕大多數(shù)的瀏覽器，實現(xiàn)用CSS讓背景圖片100%填充了。
