CSS3 opacity 屬性 · W3School CSS 參考手冊

# CSS3 opacity 屬性 ## 實例設置 div 元素的不透明級別： ``` div { opacity:0.5; } ``` 您可以在本頁底部找到更多實例。 ## 瀏覽器支持所有瀏覽器都支持 opacity 屬性。注釋：IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。 ## 定義和用法 opacity 屬性設置元素的不透明級別。 | 默認值： | 1 | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.opacity=0.5 | | --- | --- | ## 語法 ``` opacity: _value_|inherit; ``` | 值 | 描述 | 測試 | | --- | --- | --- | | _value_ | 規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。 | [測試](/tiy/c.asp?f=css_opacity) | | inherit | 應該從父元素繼承 opacity 屬性的值。 | ## 親自試一試 - 實例 [改變元素的不透明度](/tiy/t.asp?f=css3_opacity_js) 本例演示如何使用 JavaScript 來改變元素的不透明度。 ``` <!DOCTYPE html> <html> <head> <script> function ChangeOpacity(x) { // 返回被選選項的文本 var opacity=x.options[x.selectedIndex].text; var el=document.getElementById("p1"); if (el.style.opacity!==undefined) {el.style.opacity=opacity;} else {alert("Your browser doesn't support this example!");} } </script> </head> <body> <p id="p1">請從下面的例子中選擇一個值，以改變此元素的不透明度。</p> <select onchange="ChangeOpacity(this);" size="5"> <option />0 <option />0.2 <option />0.5 <option />0.8 <option selected="selected" />1 </select> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 圖像透明度](/css/css_image_transparency.asp "CSS 圖像透明度")