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

Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве 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 , обновлено 25.10.2019

Комментарии

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

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

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