[Solved] Blending with partially transparent images

[MalikDrako]

I am trying to make UI elements that can change color at runtime, but I am having trouble getting transparent images to work like I want them to.

Using background-blend-mode: multiply works exactly like I want for opaque images, but fails for partially transparent images, leaving a colored square around the image. I also tried using filter: hue-rotate(), but that does not give the correct color.

I am using SVG images, and am not opposed to changing how I place them in the HTML. I would try editing the SVG at runtime, but they tend to be more complex than simple shapes, and the ones I receive tend to have rasterized effects.

See http://codepen.io/anon/pen/QbbbpZ for an example of what I have tried.

[MalikDrako]

No one has any ideas? Is it just not possible with CSS?

[gcyrillus]

Hello,

what do you expect actually ?

What is the purpose of background-color here ?

[MalikDrako]

The goal is to have partially transparent UI elements that can change color at runtime. I dont necessarily have to use background-image/background-color if there is a solution using something else.

Multiply is the preferred blend mode, and I need it to respect the alpha for the final output. See my codepen from my first post. The circle with “Goal” was done in photoshop to show what I want.

[MalikDrako]

I finally got an answer from somewhere else.

Webkit has -webkit-mask-image that I can use to mask out the fill from the color

#button {
    background-image: url("http://i.imgur.com/JLjAor5.png");
    -webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
}

.ui-el-center {
    background-color: @mainColor;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-blend-mode: multiply;
}

[Author]

Posts