DD_belatedPNG,IE6下PNG透明解決方案(國(guó)外)
更新時(shí)間：2010年12月06日 19:25:39 作者：
今天介紹DD_belatedPNG,只需要一個(gè)理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.
我們知道IE6是不支持透明的PNG的,這無(wú)疑限制了網(wǎng)頁(yè)設(shè)計(jì)的發(fā)揮空間.
然而整個(gè)互聯(lián)網(wǎng)上解決這個(gè)IE6的透明PNG的方案也是多不勝數(shù),從使用IE特有的濾鏡或是expression,再到j(luò)avascript+透明GIF替代.但是這些方法都有一個(gè)缺點(diǎn),就是不支持CSS中backgrond-position與background-repeat.
而我今天介紹DD_belatedPNG,只需要一個(gè)理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時(shí)DD_belatedPNG還支持a:hover屬性,以及<img>.
看Demo
原理
這個(gè)js插件使用了微軟的VML語(yǔ)言進(jìn)行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.
使用方法
1.在這里下載DD_belatedPNG.js文件.
2.在網(wǎng)頁(yè)中引用,如下:
<!--[if lte IE 6]>
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg');
/* 將 .png_bg 改成你應(yīng)用了透明PNG的CSS選擇器*/
</script>
<![endif]-->
3.有2種調(diào)用函數(shù),一種是DD_belatedPNG.fix(),如上代碼.另一種是fix(),這中方法需要在函數(shù)內(nèi)指出css選擇器名.
使用a:hover請(qǐng)留意
5-25更新:如果你也像jutoy同學(xué)一樣想要用透明PNG作為a:hover時(shí)的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會(huì)導(dǎo)致無(wú)法成功.同時(shí)我也更新了demo,請(qǐng)需要的更新查看.接著我們看看正確的代碼:
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.trans,.box a:hover');
</script>
<![endif]-->
其他方案
在這里還是提供其他方案供大家參考.
然而整個(gè)互聯(lián)網(wǎng)上解決這個(gè)IE6的透明PNG的方案也是多不勝數(shù),從使用IE特有的濾鏡或是expression,再到j(luò)avascript+透明GIF替代.但是這些方法都有一個(gè)缺點(diǎn),就是不支持CSS中backgrond-position與background-repeat.
而我今天介紹DD_belatedPNG,只需要一個(gè)理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時(shí)DD_belatedPNG還支持a:hover屬性,以及<img>.
看Demo
原理
這個(gè)js插件使用了微軟的VML語(yǔ)言進(jìn)行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.
使用方法
1.在這里下載DD_belatedPNG.js文件.
2.在網(wǎng)頁(yè)中引用,如下:
復(fù)制代碼 代碼如下:
<!--[if lte IE 6]>
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg');
/* 將 .png_bg 改成你應(yīng)用了透明PNG的CSS選擇器*/
</script>
<![endif]-->
3.有2種調(diào)用函數(shù),一種是DD_belatedPNG.fix(),如上代碼.另一種是fix(),這中方法需要在函數(shù)內(nèi)指出css選擇器名.
使用a:hover請(qǐng)留意
5-25更新:如果你也像jutoy同學(xué)一樣想要用透明PNG作為a:hover時(shí)的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會(huì)導(dǎo)致無(wú)法成功.同時(shí)我也更新了demo,請(qǐng)需要的更新查看.接著我們看看正確的代碼:
復(fù)制代碼 代碼如下:
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.trans,.box a:hover');
</script>
<![endif]-->
其他方案
在這里還是提供其他方案供大家參考.
相關(guān)文章
今天小編就為大家分享一篇layui富文本編輯器前端無(wú)法取值的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在用Firefox上一些網(wǎng)站會(huì)看到這樣的顯示108年1月26日，而IE顯示為2008年1月26日原因是javascrīpt的兼容性問題2014-09-09
js和jq使用submit方法無(wú)法提交表單的快速解決方法
下面小編就為大家?guī)硪黄猨s和jq使用submit方法無(wú)法提交表單的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
JS Array創(chuàng)建及concat()split()slice()的使用方法
下面小編就為大家?guī)硪黄狫S Array創(chuàng)建及concat()split()slice()的使用方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
css實(shí)現(xiàn)窗戶上水珠效果，效果特別逼真，窗外的雨淅淅瀝瀝飄打在玻璃上，看起來很像模糊的窗外，斜滴的雨露，接下來給大家一起來用CSS技術(shù)實(shí)現(xiàn)這樣一幅畫面，下面給大家分享使用純css實(shí)現(xiàn)窗戶玻璃雨滴逼真效果，感興趣的朋友快樂圍觀吧2015-08-08
小程序瀑布流組件實(shí)現(xiàn)翻頁(yè)與圖片懶加載
這篇文章主要介紹了小程序瀑布流組件實(shí)現(xiàn)翻頁(yè)與圖片懶加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
表單驗(yàn)證在很多地方都可以用到，本文詳細(xì)的介紹了javascript表單是否為空驗(yàn)證方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
非常簡(jiǎn)潔的進(jìn)度條實(shí)現(xiàn)代碼，一般用于一些比較耗時(shí)間的操作。2009-05-05
bootstrap下拉分頁(yè)樣式 帶跳轉(zhuǎn)頁(yè)碼
這篇文章主要為大家詳細(xì)介紹了bootstrap下拉分頁(yè)樣式，帶跳轉(zhuǎn)頁(yè)碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12