目录

CSS opacity 属性

❮上一节完整的CSS参考下一节❯

示例

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

div {
opacity: 0.5;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

opacity-level 描述透明度级别，其中 1 完全不透明，0.5 表示 50% 透明，0 表示完全透明。

不透明度0.2

不透明度0.5

不透明度 1
（默认）

笔记：当使用opacity属性为元素的背景添加透明度，其所有子元素也会变得透明。这可能会使完全透明元素内的文本难以阅读。如果您不想对子元素应用不透明度，请改用 RGBA 颜色值（请参阅下面的"More Examples"）。

展示演示❯

默认值：	1
遗传：	不
可动画：	是的，查看各个属性。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.opacity="0.5"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
opacity	4.0	9.0	2.0	3.1	9.0

CSS 语法

opacity: number|initial|inherit;

属性值

Value	Description	Demo
number	Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about 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);
}

亲自试一试 »

提示：了解有关 RGBA 颜色的更多信息CSS RGBA 颜色。

示例

如何使用 JavaScript 更改元素的不透明度：

function myFunction(x) {
// Return the text of the selected option
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 参考：不透明度属性

❮上一节完整的CSS参考下一节❯