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;
}

Частичный ответ можно получить в своем редакторе кода, попросив браузер отрисовать эти стили.