首頁
文章清單
RSS 
|
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'
同意轉載，不過麻煩看一下轉載需知
