CODEWITHSUNDEEP
htmlcsscolorspng
Lilly
Lilly

Reputation: 69

color overlay png in html5/css3

I have a lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.

For example: http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.

But is there an easy way to do this with HTML5/CSS3?

Upvotes: 2

Views: 29740

Answers (4)

Maarten Wolfsen
Maarten Wolfsen

Reputation: 1733

I recommend converting your PNG into a SVG. I had the same problem, till I did that. From there, you only have to change the fill color (which can also be dynamic for, for example, wordpress)

Upvotes: 0

Vince C
Vince C

Reputation: 878

(A bit late)

If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.

That way you can place a background color behind it and make it whatever color you want...

HTML

<img src="transparencyswitch.png" height="20" width="20"/>

CSS

img {
    background-color: grey;
}

Upvotes: 3

andyb
andyb

Reputation: 43823

It's possible with just CSS but has so major limitations it's far from a perfect solution.

HTML

<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>

CSS

img {
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}

The limitations being

  • Webkit only
  • Can only change black to something more transparent, i.e. grey. Colour masks are not possible.

See demo - Tested in Chrome 26.

Upvotes: 4

Kees Sonnema
Kees Sonnema

Reputation: 5784

A way of doing this is to put the image in a div and put a div above that with opacity so you still can see the image a little bit but it has the color of the overlaying div. Other ways aren't possible with html5/css3.

examples: here

Upvotes: -2

Related Questions