Алексей Овсянников
Multiple Backgrounds. Практика примения.
Зачем нужен множественный фон?
Самое очевидное преимущество использования нескольких фонов в CSS - это визуальная привлекательность, которую они придают сайту. Накладывая несколько изображений или цветов, вы можете создавать уникальные и привлекающие внимание дизайны.
Порядок применения фоновых слоев определяется порядком, в котором они указаны в свойстве background. В случаях когда общая запись свойства background разделена на несколько отдельных свойств, порядок будет установлен в порядке записи их в CSS правиле.
Свойство background-blend-mode для смешивания цветов
Свойство background-blend-mode определяет, как цвета верхнего слоя должны взаимодействовать с цветами нижнего слоя. В значение свойства multiply, производит наложение цветов друг на друга.
Рассмотрим следующий запись стилей:
.hero {
background-blend-mode: multiply;
background-image: linear-gradient(
to bottom right,
#1f005c,
#5b0060,
#870160,
#ac255e,
#ca485c,
#e16b5c,
#f39060,
#ffb56b
);
background-color: #ced4da;
}
Такая запись создаст достаточного яркий градиент, который будет немного затемнен серым цветом #ced4da. Результат будет следующим:
Стоит так же отметить, что поддержка у background-blend-mode достаточно высокая ~ 96%.
Создание фоновой композиций
Далее рассмотрим два фона из моей любимой подборки множественных фонов. Не поленитесь открыть ссылку и посмотреть на готовые реализации.
Разберем такой пример записи:
.hero {
background-color: #eee;
background-image: linear-gradient(
45deg,
black 25%,
transparent 25%,
transparent 75%,
black 75%,
black
), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
Результат применения этих стилей будет следующим:
Как работает этот синтаксис?
Когда указано несколько свойств семейства background, свойства, создающие цвет или изображение, будут накладываться друг на друга в порядке их перечисления. Первое указанное свойство расположится внизу, а последнее - вверху.
Первым сработает background-color, создав серовата белый фон.
background-image создаст два градиента в порядке их перечисления. Каждый градиент создает квадрат с черным и прозрачными цветами.
background-size задает размер каждого градиента: 60 пикселей на 60 пикселей.
background-position задает положение каждого фонового изображения(т.е. двух градиентов). Первый градиент начинается в левом верхнем углу элемента, а второй - расположен на 30 пикселей правее и на 30 пикселей ниже первого градиента.
Результатом станет фон из повторяющихся черных квадратов, между которыми будет виднеться серый фон. Виднеться он по причине, что градиенты частично прозрачные.
Информация для закрепления темы
В каком порядке применяться эти свойства?
.hero {
background: linear-gradient(
135deg,
#708090 21px,
#d9ecff 22px,
#d9ecff 24px,
transparent 24px,
transparent 67px,
#d9ecff 67px,
#d9ecff 69px,
transparent 69px
),
linear-gradient(
225deg,
#708090 21px,
#d9ecff 22px,
#d9ecff 24px,
transparent 24px,
transparent 67px,
#d9ecff 67px,
#d9ecff 69px,
transparent 69px
) 0 64px;
background-color: #708090;
background-size: 64px 128px;
}
Частичный ответ можно получить в своем редакторе кода, попросив браузер отрисовать эти стили.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile