方法一、

js控制：

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">  
<img src="pictures/background.jpg" height="100%" width="100%"/>  
</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
    $('#formbackground').height($(window).height());
    $('#formbackground').width($(window).width());
});
</script>

方法二、

全瀏覽器兼容：

.bg{  
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);  
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
-moz-background-size:100% 100%;  
    background-size:100% 100%;  
}

總結(jié)：

做響應(yīng)式布局的時(shí)候，如果有背景圖，我們當(dāng)然希望他能夠全屏100%顯示，這樣顯得頁(yè)面非常的爆滿，不過(guò)這又出現(xiàn)了一個(gè)問(wèn)題，圖片的尺寸多大合適呢，現(xiàn)在的瀏覽器分辨率參差不齊，對(duì)于Firefox等高級(jí)的瀏覽器，使用Background-size設(shè)置為100%即可，而IE瀏覽器就需要不同設(shè)置。

背景100%填充

在Firefox中，只需要用background-size則可以控制其隨容器的大小而自動(dòng)伸縮

.picLUp{
    background:url(logo.png) no-repeat;
    width:100%;
    height:40%;
    background-size:100% 100%;
}

在這樣的CSS控制之下，則可以在Firefox中達(dá)到背景圖片隨父容器大小而自動(dòng)變化，達(dá)到填充效果，圖片會(huì)被拉伸填充，這并不是我們想要的效果，那么我們可以不設(shè)置100%參數(shù)，而是使用cover參數(shù)。

background-size:cover

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

針對(duì)IE瀏覽器

但是在IE之下，你會(huì)發(fā)現(xiàn)上面的CSS控制會(huì)很不理想，它并不會(huì)因?yàn)槟阌辛薭ackground-size:100% 100%;而自動(dòng)縮放，圖片原本怎么樣就怎么樣顯示，如果容器比圖片小，則只能顯示圖上的一部分，那么要達(dá)到這個(gè)效果，則需要使用IE特有的濾鏡。

AlphaImageLoader

AlphaImageLoader兼容性在IE5.5+以上版本的瀏覽器上都可以完美運(yùn)行。

語(yǔ)法

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

屬性

• 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 屬性。

說(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='1.jpg',sizingMethod='scale');
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論