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

Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве 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, с помощью которого можно задать элементу скорость и параметры изменения других...
1469
0
Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации JQuery.
3441
+2
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
4937
+3
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
8037
+1
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
18194
+2
CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы.
931
+1