Hello,
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 feColorMatrix to 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 with source-out mode.
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.
Considering you've tagged this with webkit, you should have a look at the Surfin' Safari blog post about CSS masks.
E.g. Is this what you want?
<!doctype html>
<style>
div {
width: 215px;
height: 174px;
background: black;
-webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>