0

I just have a little png, that is used as a "grid" by using background repeat, the format of the image for the grid would be something like this |_ then just repeat itself to cover the whole body.

Now the thing is, is there a possibility to change its color by using CSS3 ? not the background of the image but the lines only.

Saw that there's a "filter" attribute in CSS3, but I don't know which one to use or if it's the best way to do it.

Basically the color of the grid would be based on a color picker in RGB or Hex format. If there's any way to add any color i want to it?

Thanks in advance.

msqar
  • 2,940
  • 5
  • 44
  • 90

2 Answers2

0

You can use a hue rotate filter in your CSS. It doesn't work in all browsers, but in some:

filter: hue-rotate(180deg)

http://caniuse.com/#feat=css-filters

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Imagine that i got a color picker where i could choose any color i want, in hex or rgb format :( is it possible to add any color i want? – msqar Feb 07 '14 at 15:12
  • @msqar Why wouldn't you just re-make your image in SVG at that point? – Brad Feb 07 '14 at 16:00
  • re-make the image in SVG? :O – msqar Feb 07 '14 at 18:11
  • Yeah, it's just a grid, right? Or use `` if you need to change it often. If you must use an image with varying color, I suppose you could even leave it as PNG but use an indexed palette, and change the palette color by modifying the contents of the file directly. – Brad Feb 07 '14 at 18:42
  • I need to read about the SVG thing, because that's what i want to do :) basically i got a piece of grid in a light blue with transparent background and then i want to change the grid color on the fly, i will do some research, thanks! – msqar Feb 10 '14 at 18:51
  • oh damn :( i have to add the 64base code every time i change the color of the grid? – msqar Feb 10 '14 at 20:55
  • No... SVG can be manipulated with JavaScript. And, why are you base-64-encoding your image? – Brad Feb 10 '14 at 21:01
  • Yea you're right, it's not needed just by using tags. Is SVG HTML5 compliant? – msqar Feb 11 '14 at 14:27
0

Alternatively, you could add opacity to your background image, and change the background color in the same id/class to the desired color. It won't change the color of the lines but give the illusion of a particular color on those lines.

Barret LaPlante
  • 141
  • 1
  • 1
  • 7