以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

用 filter:glow 在 IE 中作陰影

Internet Explorer 7 之前的版本,能不能正確支援 png-24 格式的半透明檔,雖然網路上傳一份 pngbehavior.htc 檔案可以修正一般 png 檔在 IE 中的顯示,不過把 png 應用在背景圖上,還是不怎麼方便。

而 IE 內建的 filter:glow 濾鏡,會在物件四周描繪出漸淡的光暈,透過這個方式,效果和使用 png 檔差不多,來看個例子。

先來看看怎麼作出區塊的陰影:

#shadow {

background:#AAA;
width:600px;
margin:auto;

}

#shadow table {

border:#AAA 1px solid;
background:#FFF;
position: relative;
left: -5px;
top: -5px;

}

#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">

<table width="100%" border="0" cellpadding="2" cellspacing="1">
   <tr>
      <td>blah blah..... </td>
   </tr>
</table>

</div>

如果把上述的作法,#shadow 的背景,不單純是顏色,改成 png 檔,效果會好看,如:

Internet Explorer 7 之前的版本,能不能正確支援 png-24 格式的半透明檔,雖然網路上傳一份 pngbehavior.htc 檔案可以修正一般 png 檔在 IE 中的顯示,不過把 png 應用在背景圖上,還是不怎麼方便。

而 IE 內建的 filter:glow 濾鏡,會在物件四周描繪出漸淡的光暈,透過這個方式,效果和使用 png 檔差不多,來看個例子。

這個例子加了個黃底,目的是讓半透明的 png 檔效果更明顯一些,

不知道你有沒有這種困擾,我是有啦,所以,我改變了作法,再看下面的例子: 

CSS 範例則為:

#shadowpng {

position: relative;
background:url(/Blog/images/bg.png) right bottom;
width:100%;
margin:5px 0 0 5px;
*padding:5px 0 0 5px;
*margin:0;

}

#shadowpng table {

border:#AAA 1px solid;
background:#FFF;
position: relative;
left: -5px;
top: -5px;

}

按鈕中的語法則為:

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 事件中即可。

下載本文 CSS, Javascript 及背景圖 png

卜維丰 1/28 07'

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: