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

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

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

　　<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怎么给背景图片加颜色遮罩”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网node.js频道。