opacity属性会使子元素也生效,而且子元素再设置opacity:1;是没有作用的;
<body>
<div class="demo">
<div class="a">woshi213sdfdf</div>
</div>
</body>
<style>
.demo {
background-color: burlywood;
opacity: 0.5;
}
.a {
opacity: 1;
}
</style>
这里子元素里面是透明度依然是0.5
实现设置背景透明,子元素不透明可以不设置opacity,将opacity并入到颜色rgb里,也就是rgba
<body>
<div class="demo">
<div class="a">woshi213sdfdf</div>
</div>
</body>
<style>
.demo {
background-color: rgb(222, 184, 135, 0.5);
}
</style>