1

is it possible to color a grayscale background image using css3?

It is for an icon. I want it to be blue.

input[name=email] { background-image: url(/static/images/icons/glyphicons_010_envelope.png); background-size: 16px auto; background-position: 8px 7px; }
chovy
  • 72,281
  • 52
  • 227
  • 295
  • See: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css – Puyol Sep 22 '12 at 11:36

1 Answers1

1

One posibility is to overlay a blue + alpha color on the image.

And one posibility to do this would be:

.base {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, black, white, black);
}
#shadow {
    box-shadow: 0px 0px 3000px 0 rgba(0,0,255,0.5) inset;
 }

To avoid looking for a black & white image, I have set a gradient in base.

Then, in shadow, I create an inset shadow of a huge size, and blue with alpha 0.5

demo

In the demo, you can see the base image, and the same image tinted in blue.

Explanation

The box shadow is set as inset, so that it is inside the box, around the border. If the size would be too small, you would see the center of the box without shadow.

And, since the color is blue with an alpha, it is somewhat transparent and you can see the background thru it.

vals
  • 61,425
  • 11
  • 89
  • 138
  • Can you explain how the box-shadow is coloring the background image? I'm not understanding how this works. – chovy Aug 05 '13 at 23:43
  • Thanks. I understand, but the middle of your demo shadow is gray still. Only the edges are tinted blue. – chovy Aug 21 '13 at 04:21
  • I see it ok in Chrome, IE 10 and Firefox. In wich browser do you see it wrong ? – vals Aug 25 '13 at 17:36
  • Chrome...on Macbook Pro retina display. Its quite noticeable. http://imgur.com/QqvbYwd – chovy Aug 26 '13 at 20:43
  • I can't test on Mac, but since it works in Chrome on Windows, I would say that it can be a bug – vals Aug 27 '13 at 09:01
  • I think Retina display is causing the problem. The external Dell monitor it works fine on. – chovy Aug 27 '13 at 17:20