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（完全不透明）。 测试
inherit 应该从父元素继承 opacity 属性的值。

亲自试一试 - 实例

改变元素的不透明度

本例演示如何使用 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 图像透明度