css 半透明 讓IE6支持png圖片半透明解決方法
發(fā)布時(shí)間:2012-12-07 10:40:44 作者:佚名
我要評(píng)論

眾所周知,透明格式的PNG24在IE6透明部分將會(huì)被灰色替代.解決方法:用PNG8格式圖片替代PNG24格式的圖片,使用CSS濾鏡,插件等等
眾所周知,透明格式的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)只能用于背景圖片是透明的情況下,頁面中的PNG透明圖片無效;
(b)背景圖片無法平鋪,只能拉伸;
(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下載以及具體使用方法。
由于地址上的是英文,在這里還是簡單翻譯一下吧。
在head內(nèi)部添加:
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq庫,請(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語言進(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í)候會(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)只能用于背景圖片是透明的情況下,頁面中的PNG透明圖片無效;
(b)背景圖片無法平鋪,只能拉伸;
(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下載以及具體使用方法。
由于地址上的是英文,在這里還是簡單翻譯一下吧。
在head內(nèi)部添加:
復(fù)制代碼
代碼如下:<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq庫,請(qǐng)自行下載
<script type="text/javascript" src="jquery.pngFix.js"></script>//注意路徑
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
也可以針對(duì)特定的選擇器:
復(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í)候會(huì)嘗試一下用這種方法。
相關(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)資料,文中給出了完整的示例代碼,對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來一2017-03-25
CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法,實(shí)例分析了css使用filter:alpha控制半透明效果的技巧,需要的朋友可以參考下2015-05-09css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2021-04-13