特定总结一下给背景图层加颜色遮罩的方法。

 

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

 

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

 

　　}

 

　　在学习上有什么疑问随时可以找我我，与大家分享互联网we