设置 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>