CSS3opacity属性
设置 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>
cssclass属性</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。