用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%;
并沒(méi)有起到作用,圖片原本是怎樣就怎樣顯示,比較大就只能顯示一部分。
所以這時(shí)需要使用IE特有的濾鏡 AlphaImageLoader 兼容性在IE5.5+以上版本的瀏覽器上都可以完美運(yùn)行。
AlphaImageLoader 語(yǔ)法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
AlphaImageLoader 屬性:
true
| false
_ true: 默認(rèn)值。濾鏡激活。String
)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù),濾鏡將不會(huì)作用。特性:
說(shuō)明:
在對(duì)象容器邊界內(nèi),在對(duì)象的背景和內(nèi)容之間顯示一張圖片。并提供對(duì)此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%
的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說(shuō),你可以選擇顯示在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%填充了。