Internet Explorer 7 之前的版本,能不能正確支援 png-24 格式的半透明檔,雖然網路上傳一份 pngbehavior.htc 檔案可以修正一般 png 檔在 IE 中的顯示,不過把 png 應用在背景圖上,還是不怎麼方便。
而 IE 內建的 filter:glow 濾鏡,會在物件四周描繪出漸淡的光暈,透過這個方式,效果和使用 png 檔差不多,來看個例子。
先來看看怎麼作出區塊的陰影:
#shadow {
} #shadow table {
} |
#shadow 內容很平常,重點是把背景填黑,另設了一個 #shadow table 的樣式,我們打算在 #shadow 中放一個表格(當然你也可以改成放另一個區塊),而這個表格的屬性中,最重要的設定,在於 position:relative,先把表格給搞成「浮動」特性,再用 left 及 top 往左、往上各移 5 像素,如此一來,影陰的效果就出來了。看效果:
Internet Explorer 7 之前的版本,能不能正確支援 png-24 格式的半透明檔,雖然網路上傳一份 pngbehavior.htc 檔案可以修正一般 png 檔在 IE 中的顯示,不過把 png 應用在背景圖上,還是不怎麼方便。 而 IE 內建的 filter:glow 濾鏡,會在物件四周描繪出漸淡的光暈,透過這個方式,效果和使用 png 檔差不多,來看個例子。 |
上述在HTML中的語法則為:
<div id="shadow">
</div> |
如果把上述的作法,#shadow 的背景,不單純是顏色,改成 png 檔,效果會好看,如:
Internet Explorer 7 之前的版本,能不能正確支援 png-24 格式的半透明檔,雖然網路上傳一份 pngbehavior.htc 檔案可以修正一般 png 檔在 IE 中的顯示,不過把 png 應用在背景圖上,還是不怎麼方便。 而 IE 內建的 filter:glow 濾鏡,會在物件四周描繪出漸淡的光暈,透過這個方式,效果和使用 png 檔差不多,來看個例子。 |
這個例子加了個黃底,目的是讓半透明的 png 檔效果更明顯一些,
不知道你有沒有這種困擾,我是有啦,所以,我改變了作法,再看下面的例子:
CSS 範例則為:
#shadowpng {
} #shadowpng table {
} |
按鈕中的語法則為:
document.getElementById('shadowpng').style.backgroundImage='url(/Blog/images/spacer.gif)'; document.getElementById('shadowpng').style.filter='glow(color:black,strength=5,enable=1)'; |
先使用backgroundImage把背景圖換掉,這裡是成一張空白透明圖,然後再為原區塊加上光暈即可。
如果要直接套用在 HTML 裡,自動執行,則把上述動作加到 onload 事件中即可。
卜維丰 1/28 07'
同意轉載,不過麻煩看一下轉載需知