CSS opacity 属性
下面还有更多“亲自试一试”的示例。
定义和用法
opacity 属性设置元素的透明度级别。
透明度级别描述了透明度，其中 1 表示完全不透明，0.5 表示 50% 透明，0 表示完全透明。
注意：使用 opacity 属性为元素背景添加透明度时，其所有子元素也会变得透明。这可能导致完全透明元素内的文本难以阅读。如果您不想将透明度应用于子元素，请改用 RGBA 颜色值（请参见下面的“更多示例”）。
| 默认值 | 1 |
|---|---|
| 继承 | 否 |
| 可动画 | 是，请参阅各个属性。了解有关可动画的信息 试一试 |
| 版本 | CSS3 |
| JavaScript 语法 | 对象.style.opacity="0.5" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
CSS 语法
opacity: 数字|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| number | 指定透明度。从 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 透明度
CSS 教程：CSS RGBA 颜色
HTML DOM 参考：opacity 属性
