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

Question

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

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

Answer 1

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

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

jsFiddle.

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