關於IE背景圖片顯示100%(背景圖片自動伸縮 自適應)


項目中header中有個PNG透明背景圖片,圖片原圖比header大很多,在chrome和ff中直接平鋪剛好能鋪滿整個header區域,

多出來的不顯示,但在IE中會顯示整個PNG圖片的尺寸,導致撐大變形。后來在網上找到一段關於IE背景圖片100%顯示的帖子,

找到解決方法是:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');

加上以上代碼完美解決!

 

轉載帖子原文:

由於W3C准備中,背景圖片並不支持伸縮功能。所以在IE和FF這兩大瀏覽器中會有一些區別

在FF中的方法可謂簡單,只需要用background-size則可以控制其隨容器的大小而自動伸縮

例子如下

.picLUp
{

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

 

在這樣的CSS控制之下則可以在FF中達到背景圖片隨父容器大小而自動變化,達到填充效果

但是在IE之下,你會發現上面的CSS控制會很不理想,它並不會因為你有了background-size:100% 100%;而

自動縮放,圖片原本怎么樣就怎么樣顯示,如果容器比圖片小,則只能顯示圖上的一部分

那么要達到這個效果,則需要用到一些特別的東西

AlphaImageLoader兼容性:IE5.5+

語法:

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

屬性:

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

 

示例

.hello{
width:10%;
height:50%;
position:absolute;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');}

}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM