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

Answer 1

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.

Answer 2

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.

Answer 3

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">