DD_belatedPNG,IE6下PNG透明解決方案(國外)
更新時間:2010年12月06日 19:25:39 作者:
今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.
我們知道IE6是不支持透明的PNG的,這無疑限制了網(wǎng)頁設(shè)計的發(fā)揮空間.
然而整個互聯(lián)網(wǎng)上解決這個IE6的透明PNG的方案也是多不勝數(shù),從使用IE特有的濾鏡或是expression,再到j(luò)avascript+透明GIF替代.但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat.
而我今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時DD_belatedPNG還支持a:hover屬性,以及<img>.
看Demo
原理
這個js插件使用了微軟的VML語言進行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.
使用方法
1.在這里下載DD_belatedPNG.js文件.
2.在網(wǎng)頁中引用,如下:
<!--[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請留意
5-25更新:如果你也像jutoy同學(xué)一樣想要用透明PNG作為a:hover時的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會導(dǎo)致無法成功.同時我也更新了demo,請需要的更新查看.接著我們看看正確的代碼:
<!--[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]-->
其他方案
在這里還是提供其他方案供大家參考.
然而整個互聯(lián)網(wǎng)上解決這個IE6的透明PNG的方案也是多不勝數(shù),從使用IE特有的濾鏡或是expression,再到j(luò)avascript+透明GIF替代.但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat.
而我今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時DD_belatedPNG還支持a:hover屬性,以及<img>.
看Demo
原理
這個js插件使用了微軟的VML語言進行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.
使用方法
1.在這里下載DD_belatedPNG.js文件.
2.在網(wǎng)頁中引用,如下:
復(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請留意
5-25更新:如果你也像jutoy同學(xué)一樣想要用透明PNG作為a:hover時的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會導(dǎo)致無法成功.同時我也更新了demo,請需要的更新查看.接著我們看看正確的代碼:
復(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)文章
解決javascript:window.close()在chrome,Firefox下失效的問題
本篇文章是對javascript:window.close()在chrome,Firefox下失效問題的解決方法進行了分析介紹。需要的朋友參考下2013-05-05JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09一定有你會用到的JavaScript一行代碼實用技巧總結(jié)
這篇文章主要為大家介紹了一定有你會用到的JavaScript一行代碼總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關(guān)屬性設(shè)置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12nodejs創(chuàng)建web服務(wù)器之hello world程序
本文給大家分享nodejs創(chuàng)建web服務(wù)器之hello world程序,node真的很好用,不僅用v8引擎來解析了javascript外,還提供了高度優(yōu)化的應(yīng)用庫,真的很好,有需要的朋友一起來學(xué)習(xí)吧2015-08-08