如何使用CSS3给背景图片添加颜色遮罩效果？

本文共计480个文字，预计阅读时间需要2分钟。

在开发过程中，有时会遇到需要给背景层添加颜色遮罩的项目。以下是一些给背景图层添加颜色遮罩的方法：

方法一：通过定位层添加颜色遮罩css.wrap1 { /* 在开发中有时需要给背景层添加颜色遮罩 */}

在开发中有时遇到需要给背景层加颜色遮罩的项目现在特定总结一下给背景图层加颜色遮罩的方法。方法一通过定位叠加(注意层级).wrap1{

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

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

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

}