PNG在IE6透明的方法

Html | CSS | PNG | IE6 | Link Bug

一直以來，製作網頁時都會遇到想用PNG圖檔，
但卻在browser IE6無法透明的問題，非常傷腦筋，
由於目前普遍大眾都還是使用IE6 (1024*768)，
因此網頁不得不順著民意製作…。

不過，最近我決定不妥協，我想好好的使用如此棒的PNG檔，
所以努力地在網路上，找了許多克服PNG在IE6透明的方法，
(因為等大家把IE6升級到IE7，不知道要多久時間。)
只要在Google鍵入" ie6 png "等關鍵字樣，就能找到一大堆了，
但為了方便大家，在這做個自己遇到問題的心得分享總整理。

■ 在分享之前，我簡單介紹一下 What's the PNG?
1.PNG (Portable Network Graphics) 可攜式網路圖形
(1)png設計的目的是取代gif。
(2)png無專利權問題。
(3)支援高階無失真壓縮。
(4)支援二維交錯。
   Q:什麼是二維交錯？
   A:當我們在確定儲存PNG前，都有提示PNG要存為
     二維交錯(Interlaced)或無(None)的選項，那
     二維交錯的目的及功用，是先行以馬賽克方式
     將圖片模糊瀏覽，最後慢慢清楚呈現在網頁上
     ，主要了為瀏覽速度及較不暫記憶空間。
     相對"二維交錯"存的檔案較"無"的格式大，
     而大多少，請自行試驗斟酌。
(5)支援true colour。
(6)256階的透明效果(alpha)。
(7)支援gamma修正。(gamma一詞太專業了，我不知道怎麼講)
(8)無法製作像gif動畫格式。(可惜)
(9)舊版browser不支援png的"透明"。

了解更多：http://www.w3.org/Graphics/PNG/

2.現在網路上大多數為主，使用browser的有：
(1)Windows Internet Explorer-IE6,IE7.
(2)Mozilla Firefox.
(3)Apple Safari.
(4)Netscape.
(5)其他

以上瀏覽器，我都使用過，在png的呈現唯獨IE6無法支援透明，
如圖比較，IE6的PNG灰灰部份是無法透明。：
IE6↓：

IE7↓：

還有PNG跟GIF在陰影部份的處理，GIF是呈現鋸齒，PNG則是優多了)

■ 所以接下來回到我們的正題-如何讓PNG在IE6透明：

(1)png圖片直接放在網頁上：

放圖在html的寫法：
這部份的解決方式，是直接在網頁上寫入或以css引入一個htc元件，
HTC (HTML Component)，可內崁Javascript。

網路上找過這方面的htc元件，我試過一個寫的不錯又好用的，
可惜網址我沒記下來，不好意思私自公開他人辛苦撰寫的javascript，
不過我另外提供許多人導引的htc元件下載點：
http://www.twinhelix.com/css/iepngfix/iepngfix.zip
網頁：http://www.twinhelix.com/css/iepngfix/
而網路上還有許多提供這方面javascript語法，請多參考試用。

不管是用htc元件內崁javascript，或直接在網頁上寫入javascript，
有了解決ie6 png透明的javascript語法是最重要的，但htc元件引入的方法較方便。

[css引入方法]:

img {behavior:url("ie6png.htc");}

※註：
css寫入的img，只針對html語法才有效，
引入的ie6png.htc，是我的路徑及檔名。

(2)用css設png為background：

放圖在網頁上的方式很多，如果遇到css將png設成div標籤的background時，
我們就不能用上述第一條方法了，而網路上找到的解決方法，好在還挺簡單的，
就是以css直接撰寫，不用再引入什麼東東元件。

範例：

[index.html]

[ie.css]

#dog {float:left;width:200px;height:200px;background:url(../images/dog.png);}

以上在ie7,firefox,safari等是正常顯示，但為了ie6，我們必須再寫另外一個css檔，
我們取為ie6stylehack.css。

[ie6stylehack.css]

#dog {
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dog.png', sizingMethod='crop');
 }

※註：
filter的用法，我不太會，但無論是國內外的這方面技術，都用filter來解，
sizingMethod的值有三種：scale,crop,image，我多半只用scale和crop。
scale值的意思是依你設div寬高大小，讓底圖延展隨寬高範圍延展。
image值的意思是照圖片原本尺寸顯示，無論你div值設大設小，都依圖片大小顯示。
crop是不管你圖大圖小，都僅在div框架範圍裡，有多少就露多少，不比例縮放。

如果browser是ie6，那就需要再多做引入ie6stylehack.css檔，來針對png的顯示。
而且這個檔要放在ie.css的link下面，順序性的讀入，寫法如下。

[index.html]

以上這個方法有個問題，就是ie.css設background的運用，ie6在background部份並不會隨著ie.css的background值去運作，
也許有辦法，但就目前沒有找到相關解的方法。

(3)css設png為background，link無法作用：

如果你要在已設PNG為背景圖的div框架內，放入文字，
大部份ie6的情況是，那些文字像似被一層透明膜蓋住一樣，
無法選取，那更別說你還設link能有什麼動作。

我做了很多試驗跟研究，但還是不懂為什麼會如此，
而在網路上找到的解決方法就是，在css上加入{position:relative;}

[ie.css]

#dog {float:left;width:200px;height:200px;background:url(../images/dog.png);position:relative;}

or

#dog a{position:relative;}

以上，謝謝。
會對這篇文章有興趣的朋友，我想多半都是有網頁設計底子，
那我粗淺的研究跟認知做分享，有不對和不足的地方，請多包涵。
【END】

最後附贈一隻PNG狗跟PNG雞。