CSS opacity 属性
下面有更多实例。
定义和用法
opacity 属性设置元素的不透明级别。
opacity-level 描述透明度级别，其中 1 完全不透明，0.5 为 50% 透明，0 为完全透明。
注释: 使用 opacity 不透明度属性向元素的背景添加透明度时，其所有子元素也将变为透明。
这会使完全透明元素中的文本难以读取。如果不希望对子元素应用不透明度，请改用RGBA颜色值（请参见下面的"更多实例"）。
| 默认值: | 1 |
|---|---|
| 继承性: | no |
| 支持动画: | yes, 请参阅单独的属性. 阅读有关动画的信息 测试一下 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.opacity="0.5" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
注释: IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
语法
opacity: number|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;
}
亲自试一试 »
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);
}
亲自试一试 »
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 颜色。
实例
如何使用 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("Your browser doesn't support this example!");
}
}
亲自试一试 »
// 返回所选选项的文本
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!");
}
}
相关页面
CSS 教程: CSS 不透明度/透明度
CSS 教程: CSS RGBA 颜色
HTML DOM 参考手册: opacity 属性
