Для того чтобы произвести эффект тонированного цветом изображения, можно использовать псевдоэлемент :after, однако можно также использовать линейный градиент. Как? Очень просто:
1 2 3 4 5 6 7 8 9 10 | .tinted-image { background: /* используется только один цвет */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* под градиентом, изображение */ url(image.jpg); } |
Посмотреть в действии можно ТУТ.
Источник статьи/урока: https://xozblog.ru
По материалам: http://css-tricks.com/tinted-images-multiple-backgrounds/