html - 仅在图像的一部分上进行灰度？

Question

在css中是否可以只制作图像灰度的一部分？
我尝试使用过滤器无济于事，似乎想不出任何方法来实现这一点。你有什么想法？

我想让这张图片只在这个页面的黑暗部分变灰。

Answer 1

我以前做过类似的事情来实现这一目标......

1. 使用 adiv并将其设置background-image为图像。
2. 设置background-position并绝对定位它，使其看起来是相同的图像。
3. 使用 CSS 设置div.

js小提琴。

对于您想要的确切内容，我可能会根据需要将其opacity设置为黑色背景，并为顶部效果设置顶部嵌入阴影。