Поиск

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

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

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

В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
15.08.2019 211
Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации JQuery.
24.10.2019 82
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по...
02.07.2019 2429
Сборник CSS стилей с эффектом фильтров Инстаграма.
08.04.2018 1217
Сборник советов как поднять оценку в PageSpeed Insights.
04.04.2019 1375
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
17.01.2018 2959