css 实现蒙版效果
如图所示，我们需要将左边的图片展示为右边的图片效果，即为图片添加一层蒙版。
一个div同时设置background–color和background–image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，要实现当前效果，我们需要在img外面加一层div。
样式：
.back {
background: url(./back.jpg);
background-repeat: no-repeat;
background-size: 400px;
}
.imgs {
height: 400px;
width: 400px;
/* 这里的背景色根据需求设置 */
background-color: aquamarine;
filter:Alpha(Opacity=60);
opacity: .6;
}
html:
<div class="back">
<div class="imgs"></div>
</div>
此时我们就可以实现我们需要的效果了。
大家有什么好的方法，多多补充哦！
原文地址:https://blog.csdn.net/weixin_49609457/article/details/129875890
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_29226.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
