CSS笔记（一）：before伪元素实现半透明背景图

通过给元素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就是带半透明背景的元素。

里面的只是一个用来看效果的子元素。