大家好，又见面了，我是你们的朋友全栈君。
设置 div 元素的不透明级别
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)]](http://javaforall.cn/synimg/5ec774a5-19fe-4a91-bc9c-05ef131c27c520220509bf4b80d6-2909-49aa-bcb7-adbd338446481.jpg)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti2beDIb-1584675708999)(D:\DAYNOTE\opacity.png)]](https://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/141095.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...