css3怎么给背景图片加颜色遮罩

这篇“css3怎么给背景图片加颜色遮罩”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css3怎么给背景图片加颜色遮罩”文章吧。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站建设、乳源网络推广、成都小程序开发、乳源网络营销、乳源企业策划、乳源品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供乳源建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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

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

}

以上就是关于“css3怎么给背景图片加颜色遮罩”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。