css3给背景图层加颜色遮罩的方法

（学习视频分享：css视频教程）

在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。

方法一：通过定位叠加(注意层级)

div class="wrap1">
         div class="inner">
     /div>
    /div>
.wrap1 {
        posITion: relative;
        width: 1200px;
        height: 400px;
        background: rgba(0, 0, 0, .5);
}
.wrap1 .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url(ban8.jpg) no-rePEat center center;
        background-size: cover;
        z-index: -1;
}
    

方法二：通过伪类元素叠加

div class="wrap2">
    /div>
.wrap2 {
        position: relative;
        width: 1200px;
        height: 400px;
        background: url(ban8.jpg) no-repeat center center;
        background-Size: cover;
}
.wrap2::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 2;
}
    

方法三：CSS3颜色叠加background-blend-mode:multiply; (正片叠底)

div class="wraP3">
    /div>
.wrap3 {
        position: relative;
        width: 1200px;
        height: 400px;
        background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
        background-blend-mode: multiply;
}
    

拓展：背景模糊加颜色叠加

.wrap4 {
        position: relative;
        width: 1200px;
        height: 400px;
        background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
        background-blend-mode: multiply;
        filter: blur(2px);
        overflow: hidden;
}
    

更多编程相关知识，请访问：编程入门！！

以上就是css3给背景图层加颜色遮罩的方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！