carlos-sanchez
11/16/2013 - 2:59 AM

Tinted images with multiple backgrounds. Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients

Tinted images with multiple backgrounds. Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-images and thus not subject to the rule where they can't come first (be top) in the stacking order.

tinted-images.css
content_copyfile_download
/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}