Grayscale only on part of the image?
Is it possible in css to render only part of the image in grayscale?
I've tried using filters to no avail, can't imagine any way to achieve this. Do you have any ideas?
I want to gray out this image just under the darker part of this page.
+3
jackcogdill
source
to share
1 answer
I've done something like this before to achieve this ...
- Use
div
and set itbackground-image
to the image. - Install
background-position
and fix it so that it looks like the same image. - Use CSS to set grayscale to
div
.
jsFiddle .
For what you are doing, I could make it a black background with opacity
set as needed and a top inset for the top effect.
+6
alex
source
to share