我正在尝试在图像上创建颜色叠加层，就像在这个应用程序中一样（图像上的绿色叠加层）：
https://i.stack.imgur.com/FdgdA.png https://i.stack.imgur.com/FdgdA.png
对我来说，他们看起来并不只是简单地在图像上添加颜色。看起来他们正在使用某种绿色滤镜。我如何用 CSS 来模拟这个？
这是我启动的 JSFiddle：https://jsfiddle.net/5ar4713h/embedded/result/ https://jsfiddle.net/5ar4713h/embedded/result/
HTML:
<img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg" />
CSS:
img {
display: block;
}
/* Filter */
img:after {
content: "";
}
CSS 过滤器的组合是一种方法，但如果没有看到实际的源页面，就很难确定。
.wrap {
width: 400px;
height: 400px;
margin: 1em auto;
position: relative;
}
.wrap img {
-webkit-filter: sepia(100%) hue-rotate(90deg) saturate(400%);
filter: sepia(100%) hue-rotate(90deg) saturate(400%);
}
<div class="wrap">
<img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" />
</div>
或者，使用带有透明绿色覆盖层的简单灰度滤镜。
.wrap {
width: 400px;
height: 400px;
margin: 1em auto;
position: relative;
}
.wrap:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(0, 150, 0, 0.75);
}
.wrap img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
<div class="wrap">
<img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
