Tinted Photos with CSS
For most web designers, posting an image is a one-step process: you post an image, as-is. Because a lot of designers are very, very clever, it’s becoming clear that we can do much more. Here’s an image:
We display this with the following CSS:
background: url(https://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;
How can we add some color to the photo using CSS? We typically add color to an element using background-color. Unfortunately, that won’t work here. While we can use multiple backgrounds in CSS3, we can’t use background-color that way.
Fortunately, we can use background gradients! If we code a semi-transparent gradient with only one color, it will tint our photo, like this:
background: linear-gradient(rgba(236, 254, 79, 0.3), rgba(236, 254, 79, 0.3)), url(http://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;
