使用濾鏡解決IE6下png圖片不能透明(被渲染成默認(rèn)色)的問(wèn)題
我要評(píng)論IE6何時(shí)才能成為過(guò)去？
這個(gè)問(wèn)題困擾開(kāi)發(fā)人員太久了，盡管IE8早已推出了好多年，然而xp上綁定的瀏覽器依然還是IE6，xp作為微軟使用時(shí)間最長(zhǎng)的系統(tǒng)，其在中國(guó)影響力無(wú)疑是極其巨大。因此，ie6雖然有這樣那樣的bug，盡管比好用得多的瀏覽器層出不窮，但并非所有用戶(hù)都善于更新，并非所有的機(jī)器都是連上了互聯(lián)網(wǎng)，因此升級(jí)成了一大難題，尤其是國(guó)·家·機(jī)·關(guān)、政·府行業(yè)、國(guó)有企業(yè)的內(nèi)網(wǎng)用戶(hù)，IE6的存在率依然在90%以上。這個(gè)數(shù)據(jù)并不夸張。
給他們做項(xiàng)目，就得時(shí)刻考到IE6的兼容性，我并不擅長(zhǎng)css，但好歹被困擾了多次，有了些經(jīng)驗(yàn)了，但新問(wèn)題總是層出不窮，這不，關(guān)于圖片是否透明的問(wèn)題，跟IE6又有關(guān)系了。先說(shuō)說(shuō)png和jpg的區(qū)別吧。
png是美工很喜歡的圖片格式，壓縮率小，支持透明，圖片很小對(duì)網(wǎng)絡(luò)資源占用率小。
jpg不支持透明，一般來(lái)說(shuō)比較大，在圖片存儲(chǔ)，照片和素材收集方面使用的更多些，不太適合大規(guī)模的使用在網(wǎng)絡(luò)傳輸上。
圓角：美工為了把圖片弄成圓角，就把周?chē)膸讉€(gè)角弄成透明的，這樣看起來(lái)毫無(wú)破綻。
IE7、IE8下不成問(wèn)題，IE6開(kāi)始鬧起了脾氣。
IE6不支持透明，所有的透明部分，都被渲染成灰色或白色（不知道啥顏色，他自己的默認(rèn)色）。這樣看起來(lái)難看不說(shuō)，圓角的功能蕩然無(wú)存。這是IE6的bug，眾所周知，但問(wèn)題出現(xiàn)了，必須解決。
網(wǎng)上找了資料，使用濾鏡方式可以解決，在css中，把圖片設(shè)成背景。無(wú)論你之前用的是<img>還是background：url，一律改成一下形式吧。
height:65px;
width:198px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="scheme/homepage/images/xzzf_out.png");
background:none;
在css中加入這些代碼，src表示的圖片路徑，height和width是圖片的寬和高，這里不要有任何變動(dòng)，要不然圖片會(huì)被拉大或壓縮。background：none這個(gè)有必要，注意其他的css代碼不可以跟這個(gè)有所沖突。
這樣的話(huà)，ie6上都解決了，ie7已經(jīng)測(cè)試沒(méi)問(wèn)題，ie8估計(jì)也還可以。有心者可以多試試。
相關(guān)文章
部分透明的蒙版效果實(shí)現(xiàn)思路(兼容ie6)
與普通的蒙版效果不一樣，需要有一個(gè)空白的地方顯示頁(yè)面上原有的動(dòng)態(tài)內(nèi)容，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-13純CSS實(shí)現(xiàn)背景半透明文字不透明效果兼容IE6
在某些情況下可能會(huì)需要背景半透明文字不透明這樣的效果，實(shí)現(xiàn)起來(lái)并不復(fù)雜，通過(guò)濾鏡便可做到，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-05- 圖片透明在某些特殊的情況下還是比較實(shí)用的，下面是用濾鏡寫(xiě)的圖片透明代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-04
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5為例)
本文以背景黑色，透明度0.5舉例為大家詳細(xì)介紹下關(guān)于背景透明，文字不透明的最佳方法同時(shí)兼容IE，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈希望對(duì)大家有所幫助2013-07-03格式png24透明底 多種解決png24格式圖片在ie6中透明問(wèn)題
圖片透明，鋸齒問(wèn)題是重構(gòu)人員很頭疼的問(wèn)題，png24可以解決這些鋸齒問(wèn)題，但是ie6不支持png24透明，不過(guò)利用ie6的hack問(wèn)題有兩種解決的辦法，感興趣的朋友可以了解下哈2013-05-24- 想不想要自己的主頁(yè)鏈接很炫呢，背景半透明的鏈接效果，空鏈接實(shí)現(xiàn)的鏈接效果，只需要定義一個(gè)特效式的CSS樣式即可以實(shí)現(xiàn)，在需要實(shí)現(xiàn)的地方應(yīng)用定義的CSS樣式，也可以全站2013-02-27
img 半透明 處理img加半透明背景實(shí)現(xiàn)思路及代碼
img加半透明背景實(shí)現(xiàn)原理：給li加上背景,li的大小就是圖片的大小,在a:hover時(shí)候改變a的透明度,感興趣的朋友可以了解下，希望本文可以幫助到你2013-01-13- 曾經(jīng)一度的采用濾鏡的方法搞定這個(gè)問(wèn)題，弊端是當(dāng)有多個(gè)png圖片的時(shí)候，這就造成了css的壓力，得寫(xiě)多少css代碼呀，也嘗試過(guò)js，缺點(diǎn)是不支持CSS中backgrond-position與back2013-09-11