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

How do I color in non-geometric shapes extracted from Photoshop using CSS?

I have an image of an outline of people holding hands–extracted from Photoshop–that I’m trying to color in from left to right, according to specified percentages. For example, sometimes I may only want 30% of the whole image filled in from left to right, with a certain color.

Problem is that when I try to color from left to right, I end up coloring in the areas outside the shapes, as well. Seems like the shapes are contained in some sort of rectangle, even though they were specifically extracted without any outside container, using Photoshop.

This is the closest I’ve come so far: 

.pic {
    background: linear-gradient(to right, red 50%, white 50%);
}
<div class="pic" >
    <img class = "image" height= "100%" width = "100%" src="http://i57.tinypic.com/2h5mmom.png"/>
</div>
Tags:

2

Answers


  1. 0

    Images are rectangles.

    You could fill the outside of the outline(s) in your image with the background color of the page (i.e., white), leaving the inside of the outline(s) transparent. Then, filling in the background color of .pic will only show through the transparent areas of your image.

    Login or Signup to reply.
  2. 0

    The image is a rectangle, to do what you want with a PNG you need to have the outside of your outline have a color matching the rest of your page and the inside being transparent. That way you will achieve the desired effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search