【轉】ie6下使PNG背景圖檔透明的方法

最近發現在IE6下不能正常顯示PNG圖檔，這讓我很苦惱。使用PNG圖檔的透明或半透明的特性能做出非常漂亮的網頁來，在Firefox和Opera中對PNG的支援都非常的好，但是IE卻無視PNG圖檔這一特性的 “存在”，雖然IE7已經支援可IE6還是不行。查了一些資料，基本解決了這一問題，這裡跟大家分享。

雖然有讓IE6支援PNG透明背景的JS程式，但不是很友善，而且影響代碼的簡潔，還是用CSS來實作的好。使用到的是：IE5.5+的AlphaImageLoader濾鏡

文法： 

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性： 

enabled : 可選項。布爾值(Boolean)。設定或檢索濾鏡是否激活。true | false 

true : 預設值。濾鏡激活。 

false : 濾鏡被禁止。 

sizingMethod : 可選項。字元串(String)。設定或檢索濾鏡作用的對象的圖檔在對象容器邊界内的顯示方式。 crop : 剪切圖檔以适應對象尺寸。 

image : 預設值。增大或減小對象的尺寸邊界以适應圖檔的尺寸。 

scale : 縮放圖檔以适應對象的尺寸邊界。 

src : 必選項。字元串(String)。使用絕對或相對 url 位址指定背景圖像。假如忽略此參數，濾鏡将不會作用。

說明： 

在對象容器邊界内，在對象的背景和内容之間顯示一張圖檔。并提供對此圖檔的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。 

PNG(Portable Network Graphics)格式的圖檔的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖檔完全透明區域後面的内容。

了解了以上的内容，可以寫一段簡單的CSS代碼來實作：

.news{width:364px;height:212px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");background:none; }

這段簡單的CSS代碼就可以在IE中正常的顯示PNG透明背景，但是會發現在FF下不會出現背景，分析原因：AlphaImageLoader濾鏡隻能被IE支援，FF是不支援該濾鏡的。

有些初學者可能會在代碼中添加這樣一段：background-image: url(/templets/images/news_bg.png);

添加這樣一段代碼雖然能解決FF下的問題，都是IE又出現問題：新的背景會覆寫在濾鏡的背景之上，導緻濾鏡顯示無效，這時候就用到IE和FF對CSS讀取的差別特性了：

我們可以分開IE6跟IE7、FF，因為IE6能識别樣式前“_”号，而IE7、FF卻不行，是以我們先寫IE7和FF能識别的CSS：

.news1{width:364px;height:212px;background:url(/templets/images/news_bg.png) top no-repeat;}

而後在代碼後加上AlphaImageLoader濾鏡代碼，并使用“_”号字首，是以最終完整的代碼是這樣的：

.news1{clear:both;float:left;width:364px;height:212px;margin-bottom:16px;background:url(/templets/images/news_bg.png) top no-repeat;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");_background:none;} 

這樣效果可以實作，也不增加多少代碼量。

不過需要注意的是：AlphaImageLoader濾鏡會導緻該區域的連結和按鈕無效，解決的辦法是為連結或按鈕使用相對定位，或者添加：position: relative;這樣條代碼，使其相對浮動。

最後AlphaImageLoader無法設定背景的重複，是以對圖檔的切圖精度會有很高的精确度要求。

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。