2009/01/20

opacity

opacity

設定元素是否可以透明看穿。

  1. 數值:(一)0 或小於 0,完全透明。(二)0 < 數值 < 1,可看穿。(三)數值 >= 1,完全不透明,此為預設值。
  2. inherit:繼承父元素。

可以使用 style 物件 的特徵 opacity 讀取或設定透明度。

IE6 沒有 opacity 此特徵,但是 IE 有提供 alpha filter,可以作 opacity 的效果。反之 Firefox, Safari, Chrome 沒有支援 filter。其用法是:

filter:alpha(opacity=數值)

數值由 0 到 100。0 為預設值,為透明。100 為不透明。元素必須成為 hasLayout 狀態,才可使用 filter。指定元素成為 hasLayout 的方法很多,通常使用 zoom:1,這樣對其它瀏覽器沒有影響。

可以用 元素物件.filters.item('Alpha').Opacity 讀取或設定透明度。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

保護圖片不被盜拷。此法是用 ANCHOR 元素 的矩形格子蓋住要保護的圖片,矩格的大小與圖片相同為宜。ANCHOR 的內容是著作權保護文字,由於 ANCHOR 設為 opacity:0 所以是透明的,文字看不到;當滑鼠移入圖片區時,會改為 opacity:0.8,然後出現保護文字。最重要的是,在圖片上點擊滑鼠右鍵,無法將圖片存檔。下例中 .crp A 的 background 不可設為 transparent 否則在 IE6 會失敗。但是必須強調一點,此法不能達成百分之百保護。基本上,在網路傳輸的資料,不可能作到百分之百保護。

也可以使用 javascript 取消滑鼠右鍵的功能;其缺點是,只要關閉瀏覽器的 javascript,就能破解保護。

元素必須成為 hasLayout 狀態。下面的範例將圖片放在背景中,然後在圖上加上一段半透明文字。SPAN.c1 在 Firefox, Safari, Chrome 都成功;但是 IE6 必須加上 zoom:1,啟動該元素成為 hasLayout 狀態,才可使用 filter。