如何用CSS實現背景圖片自適應？

精華

麥克馬高 2016-11-10 12:02:35 瀏覽(77888) 回復(6) 贊(0)

在[HTML](http://hgci.cn/html)中通過[CSS](http://hgci.cn/css)設置[背景圖片](http://hgci.cn/css3/css3-backgrounds.html)自適應瀏覽器大小，該如何實現？ ![](http://hgci.cn:/attachments/day_161110/201611101158428821.png)

標簽： css css3

回答(6)

精華 2016-11-10

用background-size屬性，你想給他多大的百分比都可以，不設置表示默認圖片大小，設置100%表示全屏顯示圖片，按比例縮小或者放大。

例如：

.picLUp{
    background:url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png) no-repeat;
    width:100%;
    height:40%;
    background-size:100% 100%;
}

這樣就可以實現背景圖片自適應父容器大小而自動變化，達到填充效果。但是，圖片會被拉伸填充，這并不是我們想要的效果，那么我們可以不設置 100% 參數，而是使用 cover 參數。

background-size:cover

設置cover參數以后，背景圖會按比例縮放填充滿整個背景。

如果使用IE瀏覽器你會發(fā)現，上面的 background-size:100% 100%; 并沒有起到作用，圖片原本是怎樣就怎樣顯示，比較大就只能顯示一部分。

所以這時需要使用IE特有的濾鏡 AlphaImageLoader 兼容性在IE5.5+以上版本的瀏覽器上都可以完美運行。

AlphaImageLoader 語法:

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

AlphaImageLoader 屬性：

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)格式的圖片完全透明區(qū)域后面的內容。

hello{
    width:10%;
    height:50%;
    position:absolute;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.w3cschool.cn/attachments/knowledge/201610/14632.png',sizingMethod='scale');
}

這樣我們就可以完美兼容絕大多數的瀏覽器，實現用CSS讓背景圖片100%填充了。