CSS笔记(一):before伪元素实现半透明背景图

原创
2016/06/14 23:51
阅读数 4K

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

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

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部