"Go" use Background-color to add matte effects to the background map using CSS

A div set background-color and background-image, color is under the IMG layer, can not achieve the matte effect, so you need to create a DIV as its sub-div, and then set the sub-div background color, There are two ways of doing this:

First, the code is as follows:

 CSS:. wrap{position:relative; Background:url (i/pic4.jpg) no-repeat; -webkit-background-size: -%; Background-size: -%;}. Warp-mask{
height:100%;
width:100%; Background:rgba (0,0,0,.4);} HTML: <divclass="Wrap"> <divclass="Wrap-mask"></div></div>

The second, through the after pseudo-element settings, the code is as follows:

 CSS:
. wrap{position:relative; Background:url (i/pic4.jpg) no-repeat; -webkit-background-size: -%; Background-size: -%;}. Wrap-mask:after{Position:absolute; Top:0; Left:0; Content:""; Background-Color:yellow; Opacity:0.2; Z-index:1; Width: -%; Height: -%;}

HTML: class="wrap">    class="Wrap-mask"></div></div>

Reference article Source: 53219367

"Go" use Background-color to add matte effects to the background map using CSS