CODEWITHSUNDEEP
css
chovy
chovy

Reputation: 75666

color a background image with css3

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; }

Upvotes: 1

Views: 92

Answers (1)

vals
vals

Reputation: 64164

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.

Upvotes: 1

Related Questions