被渲染成默認色 使用濾鏡解決IE6下png圖片不能透明的問題

IE6何時才能成為過去?

這個問題困擾開發人員太久了,盡管IE8早已推出了好多年,然而xp上綁定的瀏覽器依然還是IE6 , xp作為微軟使用時間最長的系統 , 其在中國影響力無疑是極其巨大 。因此,ie6雖然有這樣那樣的bug,盡管比好用得多的瀏覽器層出不窮,但并非所有用戶都善于更新,并非所有的機器都是連上了互聯網,因此升級成了一大難題,尤其是國家機關、政府行業、國有企業的內網用戶,IE6的存在率依然在90%以上 。這個數據并不夸張 。

給他們做項目,就得時刻考到IE6的兼容性,我并不擅長css,但好歹被困擾了多次,有了些經驗了 , 但新問題總是層出不窮,這不 , 關于圖片是否透明的問題,跟IE6又有關系了 。先說說png和jpg的區別吧 。

png是美工很喜歡的圖片格式,壓縮率?。?支持透明,圖片很小對網絡資源占用率小 。
jpg不支持透明 , 一般來說比較大,在圖片存儲,照片和素材收集方面使用的更多些,不太適合大規模的使用在網絡傳輸上 。
圓角:美工為了把圖片弄成圓角,就把周圍的幾個角弄成透明的,這樣看起來毫無破綻 。

IE7、IE8下不成問題,IE6開始鬧起了脾氣 。
IE6不支持透明,所有的透明部分,都被渲染成灰色或白色(不知道啥顏色 , 他自己的默認色) 。這樣看起來難看不說,圓角的功能蕩然無存 。這是IE6的bug,眾所周知,但問題出現了,必須解決 。
網上找了資料,使用濾鏡方式可以解決,在css中,把圖片設成背景 。無論你之前用的是img還是background:url,一律改成一下形式吧 。

復制代碼代碼如下:
height:65px;
width:198px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src="https://www.questions.com.cn/dnjc/scheme/homepage/images/xzzf_out.png");
background:none;

在css中加入這些代碼,src表示的圖片路徑,height和width是圖片的寬和高 , 這里不要有任何變動,要不然圖片會被拉大或壓縮 。background:none這個有必要,注意其他的css代碼不可以跟這個有所沖突 。
這樣的話,ie6上都解決了,ie7已經測試沒問題,ie8估計也還可以 。有心者可以多試試 。

相關經驗推薦