html - 画像の一部のみをグレースケールしますか?

Question

CSSで画像の一部だけをグレースケールにすることは可能ですか?
私はフィルターを無駄に使用しようとしましたが、これを達成する方法は考えられないようです。あなたはなにか考えはありますか？

このページの暗い部分だけ、この画像をグレーアウトしたいと思います。

Answer 1

私はそれを達成するために前にこのようなことをしました...

1. を使用してdiv、それを画像に設定しbackground-imageます。
2. を設定しbackground-position、同じ画像のように見えるように絶対に配置します。
3. CSSを使用して、のグレースケールを設定しdivます。

jsFiddle。

あなたが望んでいる正確なことのために、私はそれをopacity必要に応じて設定された黒い背景と、トップエフェクトのためのトップインセットシャドウを持つようにするかもしれません。