通过给元素before伪元素作为背景图片的载体,实现半透明背景。
这样的好处是避免直接调整opacity导致前景及子元素也变透明。
样式如下:
.pane {
position: relative;
}
.pane::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(255, 0, 0, 0.5);
opacity: 0.3;
}
下面是一个使用的例子。
示例如下:
<div class="pane">
<div style="width:200px;height:200px;background:rgba(123,123,123,);">
</div>
</div>
外面的div就是带半透明背景的元素。
里面的只是一个用来看效果的子元素。