Thanks to Rene Limón's answer , I was able to create a silhouette in CSS like this:
#silueta img {
-webkit-filter: grayscale(100%) brightness(0); /* Safari 6.0 - 9.0 */
filter: grayscale(100%) brightness(0);
opacity: 0.6;
}
<div id="original">
<img src="https://isstatic.aoverflow.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silueta">
<img src="https://isstatic.aoverflow.com/JJ6Vs.png" height="150px" width="auto" />
</div>
But there is a problem: the silhouette is black/gray and I would like it to be in other colors to superimpose several of them and to easily differentiate what corresponds to each of them.
I have tried changing the filter values to add hue-rotate
, but to no avail. I tried combining with the top voted solutions of this question , but they didn't work either. I've also tried adding different filters to div
e img
, but no luck.
I imagine that the problem is that when you set the brightness to zero, the silhouette is black and even if you change the value of hue-rotation
it will not affect it because it will continue to remain black.
How could you get a silhouette with color using CSS? What combination of filters would work?
If you decrease the
grasycale
, what will happen is that the image will not be "opaque" and you will be able to see the color if you rotate the hue and usecontrast
andsaturation
. It would be very easy if there was a "fill" option. One way to get the desired effect is through Canvas. All you have to do is draw the image, get itsimageData
and override the paint colors.Example
You can obviously draw all three shapes on a single Canvas stage so you can move them around. In case you want to move them, you must associate a handler for the drag event in Canvas, get the shape according to the coordinates of the pointer and repaint the shape updating the position according to the pointer.
Note: the images that undergo this procedure must be hosted locally or via base64, otherwise you will get the error "The canvas has been tainted by cross-origin data. at drawImage" , which means that you cannot treat with an image from another domain.
In this post they suggest the combination of three filters to color the image:
red
green
blue
I think it is the closest thing to what you are looking for in what you can use "filter"
Instead of using grayscale, you could set the contrast to 0 and then play around with the other values. A high value of
saturate
will help make the colors more marked.Here you can see it working: