Наложение градиента на изображение

Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус метода в том, что изображение элемента задаётся только через CSS background.

HTML

<h3>Оригинал</h3>
<a href="#" class="image-original"></a>

<h3>С наложенным градиентом</h3>
<a href="#" class="image-gradient"></a>
HTML

CSS

.image-original {
	width:650px;
	height:427px;
	background: url(/img.jpg) 0 0 no-repeat;
	background-size: cover;
}

.image-gradient {
	width: 650px;
	height: 427px;
	background: 
		linear-gradient(to left, #6b2f64, #a24f4f), 
		url(/img.jpg) 0 0 no-repeat;
	background-blend-mode: screen;
	background-size: cover;
}
CSS
31.08.2018, обновлено 13.05.2021
2558

Комментарии

, чтобы добавить комментарий.

Другие публикации

Плавное увеличение фонового изображения
В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
3241
+1
Появление элементов по очереди
Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации JQuery.
6602
+2
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
12180
0
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
26409
+3
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
32115
+3
Фильтры Instagram на CSS
Сборник CSS стилей с эффектом фильтров Инстаграма.
3573
0