IE6中 PNG 背景透明的最佳解決方案

很多做網站的朋友在處理瀏覽器兼容性的時候，都遇到了在IE6 下 PNG 背景圖片不透明的問題。

爲什麼要使用 PNG 圖片？

簡單來說，使用 PNG 格式比起 GIF 來表現色彩更豐富，特別是表現漸變以及背景透明的漸變要比GIF格式出色很多。目前，最新的瀏覽器基本上都支持PNG格式。唯獨有萬惡的 IE6 不支持 PNG 背景透明，在 IE6 中的 PNG 背景圖會顯示一個灰色的背景。

IE6 中 PNG 背景圖片透明的方法

其實方法有很多，但網絡上提供的方法也有諸多缺陷。比如不支持 css 中 backgrond-position 與 background-repeat 等，所以園子推薦你使用 DD_belatedPNG，方法如下：

1.首先下載 DD_belatedPNG.js 文件，本文下方有提供下載，將此文件放置到你的網站中的 js 目錄下。

2.在你使用了 PNG 背景的頁面頭部嵌入以下代碼，一般是加在 head 區域。

12345678

<!--[if IE 6]> <script src="js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script> <script type="text/javascript">/* EXAMPLE */ DD_belatedPNG.fix('.png_bg');/* 將 .png_bg 改成你應用了透明PNG的CSS選擇器,例如我例子中的'.trans'*/</script> <![endif]-->

需要注意的一些問題：

1.如果你放置的 DD_belatedPNG.js 路徑不同的話，也需要更改上述代碼中的路徑。

2.以上代碼中的

1	DD_belatedPNG.fix('.png_bg');

括號中的 .png_bg 改成你在 CSS 定義了 PNG 背景圖片的選擇器，多個選擇器請用英文逗號隔開，如下行代碼所示：

1	DD_belatedPNG.fix('.png_bg1, .png_bg2');

3.有些朋友可能需要用到透明的 PNG 圖片做爲鼠標經過時的背景圖片，這就需要用到 a:hover 屬性，在這種情況下就需要以“a:hover”來做選擇器了，你可以參考下面代碼的寫法：

123456

<!--[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]-->

通過以上兩步就實現了 IE6 中 PNG 背景圖片透明的效果，在使用過程中有什麼問題給我留言哈。

寫在最後：我個人一直認爲 IE6 早就該死了，在以前的文章中也聲討過，可是當我看到訪問統計後臺數據時，我真的很疑惑，IE6 真的該死了嗎?在我的站點統計中使用 IE6 的使用率還保持着24% 左右的佔有率。如果真的放棄了，那意味着會對這些喜歡古董的用戶帶來不好的體驗。所以，園子認爲，還是花些時間去專門爲 IE6 去折騰下吧。

IE6中 PNG 背景透明所用到的素材下載

相關下載（161K） 百度網盤 | 華爲網盤 | 示例文件下載（包含DD_belatedPNG.js文件和IE6中 PNG 背景透明示例）