CSS - Apply a colour overlay to a PNG with transparent background

Question

Can someone please advise how to do this:

I have a PNG image being used on a site for a client. The image has a transparent background and the content of the image is essentialy an outlined drawing. For this example lets say its a stick man drawing. Everything is transparent except the stickmans outlines.

What I want to be able to do is to add this image whether its as a background image or just as an image element. and to apply a CSS overlay that will ONLY colour the actual content or the "lines" in the image. In otherwords Stickman can have his colour changed from white, to blue, red, green etc via a css overlay that will not colour background.

I am aware I can do this in photoshop but I am trying to create a more dynamic solution for this. it is to allow for dynamic changing of the image

You could use [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode), though it has not the best browser support. Post a code snippet with the image in question. .... I would actually suggest you create an SVG. With that you can easily change line color, and more or less full browser support (from IE9) — Asons, Apr 14 '17 at 16:54
Thank you for the reply, I cannot post the image at the moment because it is my clients logo and they have not yet trademarked or anything so I have been asked to keep it private for now ! I will however create a mockup and post back later if it helps — Greg, Apr 14 '17 at 16:59
I agree with @LGSon, if you can, use SVG. Otherwise, you could draw the image on a canvas and manipulate that canvas to do anything you want with it. — jcaron, Apr 14 '17 at 20:07
Also in the realm of fancy things you can do with SVG that don't have great browser support yet, `mask-image` does exactly what you're wanting: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image — cjl750, Apr 15 '17 at 01:27

score 0 · Answer 1 · answered Apr 14 '17 at 16:57

0

Expirement with this:

filter: hue-rotate(0deg);

You would change 0 to anything from 0 to 360.

This changes the hue as a rotation around the color wheel.

answered Apr 14 '17 at 16:57

Cameron

1,049
12
24

Thank you for the suggestion, I did come across the hue-rotate filter, and it's almost suitable. The problem is I have very specific colours that need to be set so I am not sure this would work – Greg Apr 14 '17 at 17:00
This might help: [http://stackoverflow.com/a/3732073](http://stackoverflow.com/a/3732073) – Cameron Apr 14 '17 at 17:05
And if you search up "rgb to hex" on Google, you get a 2-way converter to convert the hex you have if you do to rgb for the rgb to hue – Cameron Apr 14 '17 at 17:08

score 0 · Answer 2 · answered Apr 14 '17 at 17:14

If the logo's background is always the same colour, you could cut out the logo leaving the logo transparent inside a coloured background.

CSS could then be used to change the logo colour, by changing the background-color of the image.

This only works if the logo background is always the same colour.

score 0 · Answer 3 · answered Apr 14 '17 at 20:02

I see that u want to kinda color a specific part of a photo, right?. (I had searched kinda lot about ur question)

anyway,HTML has a tag named to chose a specific part, but unfortunately it works with tag to make a part of an image clickable; roughly speaking, doing that cant be done with HTML and CSS only (as I think). You can also use JS with The HTML code(you will cover your wanted area and color it).

function gg() {
var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image(); 
img.src = 'test.bmp'; // any pic u want
img.onload = function() {    // after the pic is loaded
    ctx.drawImage(this,0,0); // add the picture
    ctx.beginPath();         // start the rectangle
    ctx.moveTo(39,40);
    ctx.lineTo(89,43);
    ctx.lineTo(82,72);
    ctx.lineTo(40,74);
    ctx.lineTo(39,40);

    ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; // set color
    ctx.fill();               // apply color
    
};
}

<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>
<input type="button" onclick="gg()" value="h">

CSS - Apply a colour overlay to a PNG with transparent background

3 Answers3