CSS的opacity 属性
1、属性
opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
2、语法
opacity: value|inherit;
| 值 | 描述 |
|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
3、案例分析
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>调整元素透明度</title><style type="text/css">.light{width: 200px;height: 20px;background-color: blue;opacity: 0;}.medium{width: 200px;height: 20px;background-color: blue;opacity: 0.5;}.heavy{width: 200px;height: 20px;background-color: blue;opacity: 1;}.father{width: 400px;height: 20px;background-color: blue;opacity: inherit;}</style></head><body><div class="light">元素完全透明</div><div class="medium">元素半透明</div><div class="heavy">元素完全不透明</div><div class="father"><div class="son">元素跟随父元素继承 opacity 属性的值</div></div></body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti2beDIb-1584675708999)(D:\DAYNOTE\opacity.png)]](https://i-blog.csdnimg.cn/blog_migrate/c797b611bab560ed722265681d03e446.png)