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

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/chaosannals/blog/691537