日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 >

让IE6支持图片半透明

發布時間:2024/10/8 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 让IE6支持图片半透明 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

眾所周知,透明格式的PNG24在IE6透明部分將會被灰色替代。
那么,到底有什么方法可以解決這個bug?


解決方法:
①用PNG8格式圖片替代PNG24格式的圖片
??? 用fireworks導出Alpha模式的PNG8格式的圖片,Alpha模式的PNG8格式圖片支持半透明,在IE6下全透明以及半透明部分會顯示成全透明,并且會存在鋸齒。如果對用戶體驗影響不是很大的話,可以考慮一下用這個方法。


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

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


③jQuery PNG fix插件
??? 相對于前面的方法,jQuery的IE6下png透明插件相對要強大些。插件jquery.pngFix.js下載以及具體使用方法
??? 由于地址上的是英文,在這里還是簡單翻譯一下吧。
在head內部添加:
<!--[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]-->??
??? 缺點:不支持backgrond-position和background-repeat。


④DD_belatedPNG插件
??? DD_belatedPNG支持backgrond-position和background-repeat,同時DD_belatedPNG還支持a:hover屬性,以及<img>.
??? 這個插件使用了微軟的VML語言進行繪制,而其他多數解決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]-->??
我沒有實際用過這種方法,但是在寫這篇文章做測試的時候初步感覺還是這個方法比較好。下次切圖的時候會嘗試一下用這種方法。

轉載于:https://www.cnblogs.com/gumgum/archive/2011/09/15/2178008.html

總結

以上是生活随笔為你收集整理的让IE6支持图片半透明的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。