opacity 属性用于设置元素的透明度级别。
不透明度与透明度相反。
此属性是 CSS3 属性之一。
此属性允许使元素完全透明、半透明或者默认。
数字范围在 0 和 1 之间。
0 使元素完全透明。
1 是使元素完全不透明的默认值。
0 到 1 之间的值逐渐使元素清晰。
负值有效。
借助 opacity 属性为元素的背景添加透明度时，其所有子元素也将变为透明。
如果我们不对子元素应用不透明度，请使用 RGBA 颜色。
| 初始值 | 1.0 |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.opacity =“0.3”; |
语法
opacity: number | initial | inherit;
不透明度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
filter: Alpha(opacity=50);
}
.example2 {
background-color: #8ebf42;
opacity: 1;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<h2>Opacity 属性示例</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>
另一个示例，第一张图像的不透明度级别为 1.0，第二张图像的不透明度级别为 0.6，第三张图像的不透明度级别为 0.2.
具有三个不透明度级别的不透明度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.a {
opacity: 1;
filter: alpha(opacity=100);
}
img.b {
opacity: 0.6;
filter: alpha(opacity=100);
}
img.c {
opacity: 0.2;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<h2>Opacity 属性示例</h2>
<h3>Opacity: 1.0;</h3>
<img src="/onitroad.jpeg" alt="house" width="300" height="300" class="a">
<h3>Opacity: 0.6;</h3>
<img src="/onitroad.jpeg" alt="house" width="300" height="300" class="b">
<h3>Opacity: 0.2;</h3>
<img src="/onitroad.jpeg" alt="house" width="300" height="300" class="c">
</body>
</html>
CSS opacity 属性值说明
| 值 | 描述 |
|---|---|
| number | 定义不透明度级别。默认值为1.0。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:41 来源：oir作者：oir