CSS3 opacity 属性

实例

设置 div 元素的不透明级别：

  1. div
  2. {
  3. opacity:0.5;
  4. }

您可以在本页底部找到更多实例。

浏览器支持

所有浏览器都支持 opacity 属性。

注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

定义和用法

opacity 属性设置元素的不透明级别。

默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.opacity=0.5

语法

  1. opacity: value|inherit;
值 描述
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。

实例

改变元素的不透明度

本例演示如何使用 JavaScript 来改变元素的不透明度。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function ChangeOpacity(x)
  6. {
  7. // 返回被选选项的文本
  8. var opacity=x.options[x.selectedIndex].text;
  9. var el=document.getElementById("p1");
  10. if (el.style.opacity!==undefined)
  11.   {el.style.opacity=opacity;}
  12. else
  13.   {alert("Your browser doesn't support this example!");}
  14. }
  15. </script>
  16. </head>
  17. <body>
  19. <p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
  20. <select onchange="ChangeOpacity(this);" size="5">
  21.   <option />0
  22.   <option />0.2
  23.   <option />0.5
  24.   <option />0.8
  25.   <option selected="selected" />1
  26. </select>
  28. </body>
  29. </html>

相关页面

CSS 教程：CSS 图像透明度