Главная » Рецепты CSS » Тонирование фонового изображения в CSS

Тонирование фонового изображения в CSS

2016-04-14 / Вр:21:45 / просмотров: 7719

Всем привет!
В этой статье буду немногословен, хочу лишь поделиться кодом на CSS, с помощью которого можно затонировать фоновое изображение не используя фотошоп.
Да, да, именно так – никакого фотошопа, а только CSS.
Вот, к примеру, у нас есть вот такое обычное изображение:

Теперь я попробую затонировать изображение с помощью CSS:

Тонирование фонового изображения в CSS

А вот и сам код:

<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Тонировние фонового изображения в CSS (bloggood.ru)</title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.tinted-image {
width: 370px;
height: 400px;
background:
/* линейный градиент */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(image.jpg); /* изображение */

}
</style>

</head>
<body>
<div class="tinted-image"></div>
</body>
</html>

Если вам нужна подсказка кода цветов (RGD), смотрите тут