背景透明圖是一項很好用卻也很討厭的工具。簡單來說,我們可以用到的背景透明手法,
大致有三種。說真的,這三種方法都不是很完美,若非效果不佳,就是語法繁複又只限IE
看得到。不管怎樣,目前我們是沒有選擇餘地的。

1.GIF,雖然有背景透明的功能,但是只有256色(實際使用216色),所以對於比較精緻
的圖片,背景透明化的效果很差,邊緣鋸齒嚴重。失敗範例如下:


2.用微軟的濾鏡來指定任何圖檔的背景色。請注意,千萬不要把這個語法用在JPG圖檔上
。因為JPG是破壞性壓縮,圖形中的輪廓部分都會被破壞,透明化效果更慘。但是如果用
BMP之類的格式,歐買尬,圖檔大到沒力。這個語法用法如下,由於實在太醜,我就不貼
範例上來了。(限IE 5.5+)

3.用PNG格式。PNG是一種比較新的圖形格式,支援全彩、非破壞性壓縮,還有背景透明功
能。但是請注意,目前IE瀏覽器還不支援PNG背景透明的效果,所以要是直接貼上去,就
會像這樣:


Mozilla Firebird支援PNG的背景透明色,所以顯示透明效果沒問題,但是,你不會想作
個firebird only的頁面吧?
對於IE來說,解決方法是使用微軟的濾鏡AlphaImageLoader(限 IE 5.5+):

語法是這樣的

< div style="filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bn_Head-png24.png',
sizingMethod='crop');width:291px;height:210px;">


這個用法不但解決了背景問題,而且還把圖檔隱藏起來,想偷圖的人還得多費點功夫才能
找到圖檔名稱。缺點是你必須指定div的高度與寬度,否則會切到圖。無論如何,這算是
目前最好的解決方案。
--

arrow
arrow
    全站熱搜