Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I need to create a silhouette of a PNG with Javascript/CSS. Is this possible?
I tried the following:
Stack the PNG with lowered opacity multiple times with absolute positioning and z-index.
This does not work.
Unfortunately I can’t use PHP or something else then Javascript and CSS.
I got some ideas with overlays and such but I can’t figure out how to do it. Any tips?
update: This only needs to work in webkit browsers, so you can bring your webkit trickbox! 🙂
It’s not possible in plain HTML/CSS.
It would be possible in embedded SVG using a filter such as
feColorMatrixto set all channels to one colour except the opacity.It would be possible in a
<canvas>using a composite operation, such as first drawing the image, then drawing a single colour over the top withsource-outmode.It might be possible in IE using a MaskFilter, using the MaskFilter to generate a masking colour (eg. white) laid over a fixed colour (eg. black). However I think you’ll lose any variable-opacity smooth edges.
It’s going to be a lot of browser-sniffing and annoyance. I’d try to avoid it.