css 半透明 讓IE6支持png圖片半透明解決方法
發(fā)布時(shí)間：2012-12-07 10:40:44 作者：佚名 
我要評論
我要評論眾所周知，透明格式的PNG24在IE6透明部分將會被灰色替代.解決方法：用PNG8格式圖片替代PNG24格式的圖片,使用CSS濾鏡，插件等等
眾所周知，透明格式的PNG24在IE6透明部分將會被灰色替代。
那么，到底有什么方法可以解決這個(gè)bug？
解決方法：
①用PNG8格式圖片替代PNG24格式的圖片
用fireworks導(dǎo)出Alpha模式的PNG8格式的圖片，Alpha模式的PNG8格式圖片支持半透明，在IE6下全透明以及半透明部分會顯示成全透明，并且會存在鋸齒。如果對用戶體驗(yàn)影響不是很大的話，可以考慮一下用這個(gè)方法。
②CSS濾鏡
在應(yīng)用了透明PNG圖片的選擇器里面加上一下代碼：
_background: transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/nav.png', sizingMethod='scale');
這種方法的缺點(diǎn)：
(a)只能用于背景圖片是透明的情況下，頁面中的PNG透明圖片無效；
(b)背景圖片無法平鋪，只能拉伸；
(c)導(dǎo)致該區(qū)域內(nèi)的鏈接和按鈕失效；
解決方法：在該區(qū)域外部添加鏈接或者按鈕，再用margin覆蓋到該區(qū)域上面；也可以用position定位實(shí)現(xiàn)。
③jQuery PNG fix插件
相對于前面的方法，jQuery的IE6下png透明插件相對要強(qiáng)大些。插件jquery.pngFix.js下載以及具體使用方法。
由于地址上的是英文，在這里還是簡單翻譯一下吧。
在head內(nèi)部添加：
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq庫，請自行下載
<script type="text/javascript" src="jquery.pngFix.js"></script>//注意路徑
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
也可以針對特定的選擇器：
<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語言進(jìn)行繪制,而其他多數(shù)解決PNG問題的方法用的是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]-->
我沒有實(shí)際用過這種方法，但是在寫這篇文章做測試的時(shí)候初步感覺還是這個(gè)方法比較好。下次切圖的時(shí)候會嘗試一下用這種方法。
那么，到底有什么方法可以解決這個(gè)bug？
解決方法：
①用PNG8格式圖片替代PNG24格式的圖片
用fireworks導(dǎo)出Alpha模式的PNG8格式的圖片，Alpha模式的PNG8格式圖片支持半透明，在IE6下全透明以及半透明部分會顯示成全透明，并且會存在鋸齒。如果對用戶體驗(yàn)影響不是很大的話，可以考慮一下用這個(gè)方法。
②CSS濾鏡
在應(yīng)用了透明PNG圖片的選擇器里面加上一下代碼：
_background: transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/nav.png', sizingMethod='scale');
這種方法的缺點(diǎn)：
(a)只能用于背景圖片是透明的情況下，頁面中的PNG透明圖片無效；
(b)背景圖片無法平鋪，只能拉伸；
(c)導(dǎo)致該區(qū)域內(nèi)的鏈接和按鈕失效；
解決方法：在該區(qū)域外部添加鏈接或者按鈕，再用margin覆蓋到該區(qū)域上面；也可以用position定位實(shí)現(xiàn)。
③jQuery PNG fix插件
相對于前面的方法，jQuery的IE6下png透明插件相對要強(qiáng)大些。插件jquery.pngFix.js下載以及具體使用方法。
由于地址上的是英文，在這里還是簡單翻譯一下吧。
在head內(nèi)部添加：
復(fù)制代碼
代碼如下:<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq庫，請自行下載
<script type="text/javascript" src="jquery.pngFix.js"></script>//注意路徑
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
也可以針對特定的選擇器：
復(fù)制代碼
代碼如下:<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語言進(jìn)行繪制,而其他多數(shù)解決PNG問題的方法用的是AlphaImageLoader濾鏡，插件DD_belatedPNG下載地址以及具體使用方法。
使用方法翻譯：
復(fù)制代碼
代碼如下:<!--[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]-->
我沒有實(shí)際用過這種方法，但是在寫這篇文章做測試的時(shí)候初步感覺還是這個(gè)方法比較好。下次切圖的時(shí)候會嘗試一下用這種方法。
相關(guān)文章
純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法
這篇文章主要介紹了純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-12- 這篇文章主要給大家介紹了利用CSS3制作簡單的3d半透明立方體圖片展示的相關(guān)資料，文中給出了完整的示例代碼，對大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們下面來一2017-03-25
CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法,實(shí)例分析了css使用filter:alpha控制半透明效果的技巧,需要的朋友可以參考下2015-05-09
css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2021-04-13
