css中不同层加入背景,css3给背景图层加颜色遮罩的方法

(学习视频分享：css视频教程)

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

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

.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;

}

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

.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;(正片叠底)

.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;

}

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