設定元素是否可以透明看穿。
- 數值：（一）0 或小於 0，完全透明。（二）0 < 數值 < 1，可看穿。（三）數值 >= 1，完全不透明，此為預設值。
- 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 讀取或設定透明度。
- 風格用法：
<style type='text/css'>
.stk {position:relative;
width:250px;
height:250px;
background:#733;
}
.stk IMG {opacity:0.5;
filter:alpha(opacity=50);
position:absolute;
top:0;
left:0;
}
</style>
<div class='stk'>
網路遊戲，線上遊戲，好玩遊戲，球類遊戲，
越野障礙遊戲，金錢遊戲，數獨遊戲，大富翁，
生存遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
<img id='img2' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div>
<script type='text/javascript'>
function fadeCSS(id, v1, v2, inc, ms)
{
var o=document.getElementById(id);
if( o.style.opacity == undefined)
o.filters.item('Alpha').Opacity=Math.floor(v1*100);
else
o.style.opacity=v1;
v1+=inc;
if( v1 > v2 ) v1=inc;
setTimeout('fadeCSS("'+id+'",'+v1+','+v2+','+inc+','+ms+')', ms);
}
fadeCSS("img2", 0.5, 1, 0.1, 250);
</script> - 執行結果：
網路遊戲，線上遊戲，好玩遊戲，球類遊戲， 越野障礙遊戲，金錢遊戲，數獨遊戲，大富翁， 生存遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {position:absolute;
top:0px;
left:0px;
padding:0px;
border:none;
}
.hvr:hover {opacity:0.5;}
.hvr:active {opacity:0;}
</style>
<div style='position:relative; width:200px; height:200px; border:solid 1px red'>
網路遊戲，線上遊戲，好玩遊戲，越野障礙遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
<img class=hvr src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div> - 執行結果：
網路遊戲，線上遊戲，好玩遊戲，越野障礙遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
保護圖片不被盜拷。此法是用 ANCHOR 元素 的矩形格子蓋住要保護的圖片，矩格的大小與圖片相同為宜。ANCHOR 的內容是著作權保護文字，由於 ANCHOR 設為 opacity:0 所以是透明的，文字看不到；當滑鼠移入圖片區時，會改為 opacity:0.8，然後出現保護文字。最重要的是，在圖片上點擊滑鼠右鍵，無法將圖片存檔。下例中 .crp A 的 background 不可設為 transparent 否則在 IE6 會失敗。但是必須強調一點，此法不能達成百分之百保護。基本上，在網路傳輸的資料，不可能作到百分之百保護。
也可以使用 javascript 取消滑鼠右鍵的功能；其缺點是，只要關閉瀏覽器的 javascript，就能破解保護。
- 風格用法：
<style type='text/css'>
.crp {position:relative;}
.crp A {opacity:0;
display:block;
filter:alpha(opacity=0);
width:200px;
height:200px;
font-size:12px;
color:black;
background:white;
}
.crp IMG {position:absolute;
top:0;
z-index:-5;
padding:0px;
border:none;
}
.crp A:hover
{opacity:0.8;
filter:alpha(opacity=80);
}
</style>
<div class=crp>
<a href='javascript:void(0)'>©Copyright 2008, by ant2legs, All Rights Reserved.<br />
按滑鼠右鍵無法將圖片存檔。</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div> - 執行結果：
元素必須成為 hasLayout 狀態。下面的範例將圖片放在背景中，然後在圖上加上一段半透明文字。SPAN.c1 在 Firefox, Safari, Chrome 都成功；但是 IE6 必須加上 zoom:1，啟動該元素成為 hasLayout 狀態，才可使用 filter。
- 風格用法：
<style type='text/css'>
.ant {background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZlSH53nQBrL11xgIYZG1QDMyLtKUGHWCVA0wZLBFTst22ReWn7pfEpNKUGQx6iGOXmELn9pd40h3yHWWbhIB18mGMkz2CyazUZ5wqHZ5-VDdicGFz4BQaeAT7mSATPIlu_1I2YlmUAZN/s200/fir.PNG);
width:200px;
height:40px;
}
.ant SPAN.c1
{background:red;
opacity:0.2;
filter:alpha(opacity=20);
}
.ant SPAN.c2
{zoom:1;
background:red;
opacity:0.2;
filter:alpha(opacity=20);
}
</style>
<div class=ant><span class=c1>CSS FIR</span></div>
<br />
<div class=ant><span class=c2>CSS FIR</span></div> - 執行結果：
CSS FIR
CSS FIR
