Tint partially transparent image/background

Question

How can I tint a background image that has transparent sections?

I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.

I am using svg images, and could switch to using <img> instead of backgrounds if necessary.

Example: Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.

Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.

Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?

example image

Can you show us an example of what you want via a photoshop comp? or at least what you're trying in css/html? maybe make a fiddle? — ntgCleaner, Apr 27 '15 at 23:05
@firedrake969 that's his goal. He has a gray circle that he's overlaying red on top of so he wants to just change the circle color — ntgCleaner, Apr 28 '15 at 02:54
Malik, I would suggest doing the opposite if you can. Make an inverse cutout. In your example, you'd have an image that is a white background with a transparent circle. Then make the background color red. — ntgCleaner, Apr 28 '15 at 02:55
The goal is to have ui elements that I can change the color on, with other background elements being visible behind. — Malik Drako, Apr 28 '15 at 03:55
Wait, if you're using an svg circle, just change the color of the svg circle? — ntgCleaner, Apr 28 '15 at 15:01
Is it possible to load the svg as text and change it at runtime? The actual svg files are much more than simple shapes — Malik Drako, Apr 28 '15 at 16:18
I just noticed some of the svg files I received have what appears to be rasterized effects. — Malik Drako, Apr 28 '15 at 18:25
I had a look at the CSS filter `hue-rotate`, which seems like it should do what I need, but it screws up the color. Is there some combination of input color and filter options that might work? — Malik Drako, Apr 28 '15 at 19:07

score 1 · Accepted Answer · edited May 23 '17 at 10:24

In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.

html:

<div id="blend-mask" class="uiElement uiBG"></div>

css:

#blend-mask {
  -webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
  background-color: #f00;
  background-blend-mode: multiply;
}

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

#pageBG {
  width: 400px;
  height: 400px;
  background-image: url("http://lorempixel.com/g/400/200/");
  background-color: rgba(255,0,0,0.25);
  background-blend-mode: multiply;
  color: white;
  text-shadow: 0 0 0.25em black;
}

.uiElement {
  width: 100px;
  height: 100px;
  margin: 25px;
  display: inline-block;
}

.uiBG {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("http://i.imgur.com/rkRJbzH.png");
}

Example working: http://codepen.io/anon/pen/vONVry

if you want to make it work as well in firefox check this post maybe will help:

Is there a -moz-mask CSS property, like -webkit-mask-image?

As well you can check using canvas to tint, there is this post that maybe can help: http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/

Is the second div just for compatibility with other browsers? I am only targeting modern android. I tested it and it seems to be working with just the `-webkit-mask-image` div. Is there any worry about support being removed? — Malik Drako, May 07 '15 at 16:30
No, the extra div isn't necessary, my mistake. Regarding the support being remove, yes there is some risk because if [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image) is right this feature is not standard — Fetz, May 07 '15 at 18:04

Tint partially transparent image/background

1 Answers1