Paint all pixels (excluding transparant) in PNG with Javascript/CSS?_问答_开发者

Paint all pixels (excluding transparant) in PNG with Javascript/CSS?

开发者 https://www.devze.com 2022-12-18 03:21 出处：网络

I need to create a silhouette of a PNG with Javascript/CS开发者_JAVA百科S. Is this possible? I tried the following:

I need to create a silhouette of a PNG with Javascript/CS开发者_JAVA百科S. 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>