Photoshop Question posted in
The official user guide can be found here.

CSS – Apply a colour overlay to a PNG with transparent background – Photoshop

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

Tags:

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search