PNG在IE6透明的方法

PNG在IE6透明的方法
922
雞婆指數 好文轉寄 平均分數:0 顆星    投票人數:0
我要評分:
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的寫法:PNG在IE6透明的方法
這部份的解決方式,是直接在網頁上寫入或以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雞。
PNG在IE6透明的方法

PNG在IE6透明的方法

上一則:ICON圖示 下一則:幸福巴士go之宜蘭幸福行程~~風箏木屐蒸氣火車親子文化之旅
我要留言: