眾所周知，透明格式的PNG24在IE6透明部分將會(huì)被灰色替代。
那么，到底有什么方法可以解決這個(gè)bug？

解決方法：
①用PNG8格式圖片替代PNG24格式的圖片
??? 用fireworks導(dǎo)出Alpha模式的PNG8格式的圖片，Alpha模式的PNG8格式圖片支持半透明，在IE6下全透明以及半透明部分會(huì)顯示成全透明，并且會(huì)存在鋸齒。如果對(duì)用戶體驗(yàn)影響不是很大的話，可以考慮一下用這個(gè)方法。

②CSS濾鏡
??? 在應(yīng)用了透明PNG圖片的選擇器里面加上一下代碼：
_background: transparent;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/nav.png', sizingMethod='scale');
這種方法的缺點(diǎn)：
(a)只能用于背景圖片是透明的情況下，頁(yè)面中的PNG透明圖片無(wú)效；
(b)背景圖片無(wú)法平鋪，只能拉伸；
(c)導(dǎo)致該區(qū)域內(nèi)的鏈接和按鈕失效；
?? 解決方法：在該區(qū)域外部添加鏈接或者按鈕，再用margin覆蓋到該區(qū)域上面；也可以用position定位實(shí)現(xiàn)。

③jQuery PNG fix插件
??? 相對(duì)于前面的方法，jQuery的IE6下png透明插件相對(duì)要強(qiáng)大些。插件jquery.pngFix.js下載以及具體使用方法。
??? 由于地址上的是英文，在這里還是簡(jiǎn)單翻譯一下吧。
在head內(nèi)部添加：
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq庫(kù)，請(qǐng)自行下載
<script type="text/javascript" src="jquery.pngFix.js"></script>//注意路徑
<script type="text/javascript">
??? $(document).ready(function(){
??????? $(document).pngFix();
??? });
</script>
也可以針對(duì)特定的選擇器：
<script type="text/javascript">
??? $(document).ready(function(){
??? ??? $('.png').pngFix( );//.png改成使用了透明PNG圖片的選擇器
??? });
</script>
<![endif]-->??
??? 缺點(diǎn)：不支持backgrond-position和background-repeat。

④DD_belatedPNG插件
??? DD_belatedPNG支持backgrond-position和background-repeat,同時(shí)DD_belatedPNG還支持a:hover屬性,以及<img>.
??? 這個(gè)插件使用了微軟的VML語(yǔ)言進(jìn)行繪制,而其他多數(shù)解決PNG問(wèn)題的方法用的是AlphaImageLoader濾鏡，插件DD_belatedPNG下載地址以及具體使用方法。
使用方法翻譯：
<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');// .png改成使用了透明PNG圖片的選擇器
</script>
<![endif]-->??
我沒(méi)有實(shí)際用過(guò)這種方法，但是在寫(xiě)這篇文章做測(cè)試的時(shí)候初步感覺(jué)還是這個(gè)方法比較好。下次切圖的時(shí)候會(huì)嘗試一下用這種方法。

轉(zhuǎn)載于:https://www.cnblogs.com/gumgum/archive/2011/09/15/2178008.html

總結(jié)

以上是生活随笔為你收集整理的让IE6支持图片半透明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。