Главная » CSS HTML » CSS: Смешение изображений

CSS: Смешение изображений

Всем доброго времени суток. Сегодня мы рассмотрим один из вариантов смешения (миксования) изображений. Изображения будем смешивать в качестве фона сайта.

Для этого напишем простой код странички:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mix images background</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section></section>
</body>
</html>

Добавим стили:

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

section{
	width: 100vw;
	height: 100vh;
}

Возьмем два изображения: природы и небрежного мазка кистью, и добавим их в качестве фона:

section{
	background-image: url(images/bg1.jpg), url(images/bg_mask1.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

Эффект смешения достигается при помощи свойства background-blend-mode:

section{
	background-blend-mode: screen;
}
Посмотреть демо
При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.



«
»
➤