如何用CSS實(shí)現(xiàn)背景圖片自適應(yīng)？

精華

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

在[HTML](http://o2fo.com/html)中通過[CSS](http://o2fo.com/css)設(shè)置[背景圖片](http://o2fo.com/css3/css3-backgrounds.html)自適應(yīng)瀏覽器大小，該如何實(shí)現(xiàn)？ ![](http://o2fo.com:/attachments/day_161110/201611101158428821.png)

標(biāo)簽： css css3

回答(6)

精華 2016-11-10

用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%;
}

這樣就可以實(shí)現(xiàn)背景圖片自適應(yīng)父容器大小而自動(dòng)變化，達(dá)到填充效果。但是，圖片會(huì)被拉伸填充，這并不是我們想要的效果，那么我們可以不設(shè)置 100% 參數(shù)，而是使用 cover 參數(shù)。

background-size:cover

設(shè)置cover參數(shù)以后，背景圖會(huì)按比例縮放填充滿整個(gè)背景。

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

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

AlphaImageLoader 語法:

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

AlphaImageLoader 屬性：

enabled: 可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false_ true: 默認(rèn)值。濾鏡激活。
false: 濾鏡被禁止。
sizingMethod: 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。
crop: 剪切圖片以適應(yīng)對(duì)象尺寸。
image: 默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
scale: 縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
src: 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

特性:

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

說明:

在對(duì)象容器邊界內(nèi)，在對(duì)象的背景和內(nèi)容之間顯示一張圖片。并提供對(duì)此圖片的剪切和改變尺寸的操作。如果載入的是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ù)的瀏覽器，實(shí)現(xiàn)用CSS讓背景圖片100%填充了。