CSS中背景图添加遮罩怎样做，具体方法是什么-群英

上一篇：HTML中怎么实现加载摄像头，方法及代码是什么下一篇：css控制元素高度实现自底向上和自顶向下的方法

这篇文章将为大家详细讲解有关“CSS中背景图添加遮罩怎样做，具体方法是什么”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：

第一种，代码如下：

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>

第二种，通过after伪元素设置，代码如下：

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>

总结

以上就是关于“CSS中背景图添加遮罩怎样做，具体方法是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签：背景图遮罩

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：HTML中怎么实现加载摄像头，方法及代码是什么下一篇：css控制元素高度实现自底向上和自顶向下的方法