Пояснения к статье:
- {background}, {background-blend-mode} — CSS свойства. Отвечают за стилизацию фонов.
- <normal>, <darken>, <multiply> — значения свойства {background-blend-mode}. Отвечают за стиль наложения фонов, а также за их правильное отображение.
Фон является лицом любого веб-сайта. От того, какая картинка будет его основой, в какой цветовой гамме будет представлена, зависит и остальной дизайн сайта.
По сути, фон является главной составляющей дизайна веб-страницы. Пользователь, который заходит на сайт, сразу же обращает внимание на его цветовое оформление. Фон же имеет самый большой размер среди всех веб-элементов, а поэтому он бросается в глаза моментально.
С помощью обычных цветов и изображений можно создать множество красивых фонов. Однако, CSS позволяет пойти куда дальше. Речь идет о нескольких фонах сразу, которые накладываются друг на друга.
В этой статье мы расскажем вам о том, как создать красивый фон в CSS и HTML, который будет иметь сразу несколько слоев.
Наложение фона. Свойство {background-blend-mode}
Данное свойство предназначено для создания красивого фона из нескольких цветов или совокупности изображений и цветов. С его помощью и создаются фоновые изображения, которые имеют определенную окраску.
Внимание! Данное свойство поддерживается далеко не во всех браузерах. Его воспринимают только новейшие версии Google Chrome, Opera и Mozila Firefox. Перед запуском примеров, либо же перед самостоятельной разработкой, убедитесь что ваш браузер присутствует в списке и достаточно обновлен.
Работать с <background-blend-mode> будет намного проще, если у вас есть опыт работы в Photoshop. Все значение, да и общее визуальное оформление очень сильно похоже на работу в фотошопе. Значения практически идентичны.
Свойство принимает множество значений:
- Normal.
- Luminosity.
- Multiply.
- Color.
- Screen.
- Saturation.
- Overlay.
- Hue.
- Exclusion.
- Darken.
- Lighten.
- Difference.
- Soft-light.
- Color-dodge.
- Hard-light.
- Color-burn.
Каждое из них имеет свои уникальные особенности, для перечисления которых не хватит всей статьи. Из-за этого в наших примерах будут рассмотрены только некоторые значения.
Переходим к практике. Для начала задайте фон, желательно фоновое изображение. Вводите его с помощью свойство background, а ссылку задавайте в url.
Чтобы свойство <background-blend-mode> сработало, необходимо задать несколько слоев. В свойстве background, кроме картинки, укажите какой-нибудь цвет.
Внимание! Если попытаетесь сделать наложение без свойства <background-blend-mode>, то вы увидите 2 фона, которые будут располагаться рядом — 1 сверху, а другой под ним.
Давайте рассмотрим как работают значения <multiply> и <darken>:
body{
width: 80%;
height: 100vh;
background: red url(i.png);
background-blend-mode: darken;
}
Как мы видим, первое значение создает единый фон, сочетая цвет и картинку. Darken создает некий эффект отсвечивания, если задать зеленый цвет фона, то можно наблюдать эффект, похожий на эффект от прибора ночного видения.
Кроме того, значения наложения можно также накладывать друг на друга. Свойство <background-blend-mode> принимает 2,3 и даже 4 значения.
Главное, чтобы количество фоновых стилей сочеталось с количеством цветов и изображений. Каждое значение применяется для отдельного фона, в указанном порядке.
Заключение
Ну вот, теперь вы знаете о том, как создать фоновую картинку, которая будет иметь сразу же 3 цвета, не просто наложенные друг на друга, но и иметь особую стилизацию.p>
Если хотите попрактиковаться в этом умении, то можете создать пару фонов самостоятельно, либо же изучить исходные материалы.