CSS opacity 属性
更多“自己尝试”的例子见下文。
定义和用法
opacity 属性用于设置元素的透明度级别。
透明度级别描述了透明的程度，其中 1 表示完全不透明，0.5 表示 50% 透明（半透明），0 表示完全透明。
注意：当使用 opacity 属性为元素的背景添加透明度时，其所有子元素也会变得透明。这可能导致完全透明元素内的文本难以阅读。如果你不想将透明度应用于子元素，请改用 RGBA 颜色值（参见下面的“更多示例”）。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 不透明度 | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
CSS 语法
opacity: number|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| 数字 | 指定透明度。范围从 0.0（完全透明）到 1.0（完全不透明）。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
opacity 属性为元素的背景及其所有子元素添加了透明度。这使得透明元素内的文本难以阅读。
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
自己动手试一试 »
示例
要避免对子元素应用透明度（如上面的示例），请改用 **RGBA** 颜色值。下面的示例为背景颜色设置了透明度，但不对文本设置。
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80, 0.6);
}
自己动手试一试 »
提示：在 CSS RGBA 颜色 中了解更多关于 RGBA 颜色的信息。
示例
如何使用 JavaScript 更改元素的透明度
function myFunction(x) {
// 返回所选选项的文本
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("您的浏览器不支持此示例！");
}
}
自己动手试一试 »
相关页面
CSS 教程： CSS Opacity / Transparency
CSS 教程： CSS RGBA 颜色
HTML DOM 参考： opacity 属性
