Two ways to add a mask effect to the background image using background-color through CSS

If a div sets background-color and background-image at the same time, the color is below the img layer and the masking effect cannot be achieved. Therefore, you need to create another div as its child div, and then set the background color of the child div. There are two methods:

The first one, the code is as follows:

css:

.wrap{
    position: relative;
    background: url(i/pic4.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.warp-mask{
    height:100%;
    width:100%;
    background: rgba(0,0,0,.4);
}

html:

<div class="wrap">
    <div class="wrap-mask"></div>
</div>

The second method is to set it through the after pseudo element. The code is as follows:

css:

.wrap{
    position: relative;
    background: url(i/pic4.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.wrap-mask:after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: yellow;
    opacity: 0.2;
    z-index: 1;
    width: 100%;
    height: 100%;
}

html:

<div class="wrap">
    <div class="wrap-mask"></div>
</div>

Summarize

The above is what I introduced to you about using background-color through CSS to add a mask effect to the background image. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!