2

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?

Lilly
  • 71
  • 1
  • 2
  • 13
  • possible duplicate of: http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – imbecile Jun 05 '13 at 07:41
  • I could do this, but then I have to change all these png-images. I was wondering if I could change the color without adapting the images in Photoshop. – Lilly Jun 05 '13 at 07:49
  • I know the jQuery Mobile project is doing something similar. I'm not sure how, but it might be worth investigating. If you find a html5/css3 solution to this problem, please let us (SO) know. – jjwdesign Jul 24 '14 at 15:45

4 Answers4

4

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.

andyb
  • 43,435
  • 12
  • 121
  • 150
3

(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;
}
Vince C
  • 868
  • 6
  • 16
0

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)

Maarten Wolfsen
  • 1,625
  • 3
  • 19
  • 35
-2

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

Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106