иконка discount

Скидка 10% по промокоду

новогодняя распродажа до 05.01.2025иконка discount
NEWYEAR2025
логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

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