Компонент Фон

Удивительная коллекция дополнительных классов для добавления различных фонов к элементам. Применение различных режимов наложения к фоновому изображению. Установить фиксированное состояние, изменить позицию.

С компонентом Фон появляется возможность установить различные режимы наложения к фоновым изображениям, применить неподвижный фиксированный фон, изменить позицию, а также установить отображение фоновой картинки только на определенных размерах области просмотра - адаптивный фон.

Background: Добавить фон элементу

Чтобы применить цвет фона к элементу, добавьте один из следующих классов:

Класс	Описание
`.uk-background-default`	Установит цвет фона по умолчанию.
`.uk-background-muted`	Установит приглушенный цвет фона.
`.uk-background-primary`	Устанавливает основной цвет фона.
`.uk-background-secondary`	Устанавливает вспомогательный цвет фона элемента.

Актуальный цвет для каждого модификатора определяется стилем UIkit 3, который вы выбрали или настроили изначально.

Примечание Для лучшей видимости на фоне инвертируйте стиль. Для этого в необходимом месте добавьте класс .uk-light или .uk-dark из компонента Инверсия.
Чтобы добавить внутренние отступы / поля к элементам, используйте компонент Padding.

Разметка

<div class="uk-background-primary uk-light"></div>

Default

Muted

Primary

Secondary

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-background-default uk-padding uk-panel">
            <p class="uk-h4">Default</p>
        </div>
    </div>
    <div>
        <div class="uk-background-muted uk-padding uk-panel">
            <p class="uk-h4">Muted</p>
        </div>
    </div>
    <div>
        <div class="uk-background-primary uk-light uk-padding uk-panel">
            <p class="uk-h4">Primary</p>
        </div>
    </div>
    <div>
        <div class="uk-background-secondary uk-light uk-padding uk-panel">
            <p class="uk-h4">Secondary</p>
        </div>
    </div>
</div>

Модификатор «Размер»

Компонент Background содержит классы для определения размера фоновым изображеням, сохраняя их внутреннее соотношение.

Класс	Описание
`.uk-background-cover`	Масштабирует фоновое изображение с сохранением пропорций полностью покрывая содержащую область.
`.uk-background-contain`	Масштабирует фоновое изображение с сохранением пропорций настолько, насколько его ширина и высота могут позволить поместиться в содержащей области полностью.
`.uk-background-width-1-1`	Масштабирует фоновое изображение, заполняя 100% доступной ширины.
`.uk-background-height-1-1`	Масштабирует фоновое изображение, заполняя 100% доступной высоты.

<div class="uk-background-cover"></div>

При использовании этих классов положение фона автоматически размещается по центру, а свойству background-repeat устанавливается значение no-repeat.

Примеры

Cover

Contain

<div class="uk-child-width-1-2@s uk-light" uk-grid>
    <div>
        <div class="uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle"
             style="background-image: url(images/dark.webp);">
            <p class="uk-h4">Cover</p>
        </div>
    </div>
    <div>
        <div class="uk-background-contain uk-background-primary uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle"
             style="background-image: url(images/dark.webp);">
            <p class="uk-h4">Contain</p>
        </div>
    </div>
</div>

Модификатор «Позиция»

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

Класс	Описание
`.uk-background-top-left`	Исходное положение изображения находится в верхнем левом углу.
`.uk-background-top-center`	Исходное положение изображения находится вверху посередине.
`.uk-background-top-right`	Начальная позиция изображения находится в верхнем правом углу.
`.uk-background-center-left`	Начальная позиция изображения находится слева.
`.uk-background-center-center`	Начальная позиция изображения находится посередине.
`.uk-background-center-right`	Устанавливает начальную позицию изображению справа.
`.uk-background-bottom-left`	Начальная позиция изображения находится в нижнем левом углу.
`.uk-background-bottom-center`	Исходное положение изображения будет находиться внизу.
`.uk-background-bottom-right`	Исходная позиция изображения находится в правом нижнем углу.

<div class="uk-background-top-left"></div>

Top Right

Top Left

<div class="uk-child-width-1-2@s uk-light" uk-grid>
    <div>
        <div class="uk-background-top-right uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-middle uk-flex-center"
             style="background-image: url(images/dark.webp);">
            <p class="uk-h4">Top Right</p>
        </div>
    </div>
    <div>
        <div class="uk-background-top-left uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-middle uk-flex-center"
             style="background-image: url(images/dark.webp);">
            <p class="uk-h4">Top Left</p>
        </div>
    </div>
</div>

Без повторений

No repeat : Скажем НЕТ повторениям!

Чтобы избежать повторений на небольших изображениях при заполнении фоновой области, добавьте класс .uk-background-norepeat. Элементу будет устанавлено фоновое изображение без повторений.

<div class="uk-background-norepeat"></div>

Фиксация фона

Фиксированное фоновое изображение

Вы также можете применить фиксированное состояние, чтобы фоновое изображение оставалось на своем месте при прокрутке сайта.

<div class="uk-background-fixed"></div>

Пример с фиксированным фоновым изображением

<div class="uk-background-fixed uk-background-center-center uk-height-medium uk-width-large" style="background-image: url(images/dark.webp);"></div>

Адаптивный фон

Добавьте один из следующих классов, чтобы ограничить отображение фоновых изображений на определенных размерах области просмотра. Это может быть полезно в тех случаях, когда изображение и контент на экране телефона / смартфона отображаются таким образом, что текст становится неразборчивым.

Класс	Описание
`.uk-background-image@s`	Отображает фоновое изображение на устройстве с шириной 640px и более.
`.uk-background-image@m`	Отображает фоновое изображение на устройствах имеющих ширину 960px и более.
`.uk-background-image@l`	Отображает фоновое изображение на девайсе с шириной 1200px и более.
`.uk-background-image@xl`	Отображает фоновое изображение на экранах от 1600px и более.

<div class="uk-background-image@m"></div>

Пример

Измените размер окна браузера, чтобы увидеть магический эффект своими глазами.
В примере ниже фоновое изображение пропадёт!

Есть изображение

Нет картинки!

<div class="uk-background-image@m uk-background-cover uk-background-muted uk-height-medium uk-width-large uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/dark.webp);">
    <p class="uk-margin-remove uk-visible@m uk-text-large uk-text-bold uk-light">Есть изображение</p>
    <p class="uk-h4 uk-margin-remove uk-hidden@m">Нет картинки!</p>
</div>

Blend modes

Режимы смешивания цветов

Модификатор Blend modes определяет режим смешивания цветов выбранного элемента. Добавьте один из следующих классов, чтобы применить различные режимы наложения к фоновому изображению.

Класс	Описание
`.uk-background-blend-multiply`	Этот класс устанавливает режим режим наложения - `multiply`, умножение; затемнение.
`.uk-background-blend-screen`	Этот класс устанавливает режим смешивания цветов - `screen`; осветление.
`.uk-background-blend-overlay`	Этот класс устанавливает режим смешивания цветов - `overlay`; контраст.
`.uk-background-blend-darken`	Этот класс устанавливает режим наложения - `darken`; затемнение.
`.uk-background-blend-lighten`	Этот класс устанавливает режим наложения - `lighten`; осветление.
`.uk-background-blend-color-dodge`	Этот класс устанавливает режим смешивания цветов - `color dodge`; осветление.
`.uk-background-blend-color-burn`	Этот класс устанавливает режим смешивания цветов - `color burn`; затемнение.
`.uk-background-blend-hard-light`	Этот класс устанавливает режим смешивания цветов - `hard-light`, жесткий свет; контраст.
`.uk-background-blend-soft-light`	Этот класс устанавливает режим смешивания цветов - `soft-light`, мягкий свет; контраст.
`.uk-background-blend-difference`	Этот класс устанавливает режим смешивания цветов - `difference`, разница.
`.uk-background-blend-exclusion`	Этот класс устанавливает режим смешивания цветов - `exclusion`, исключение.
`.uk-background-blend-hue`	Этот класс устанавливает режим наложения - `hue`, оттенок.
`.uk-background-blend-saturation`	Этот класс устанавливает режим смешивания цветов - `saturation`, насыщенность.
`.uk-background-blend-color`	Этот класс устанавливает режим смешивания цветов - `color`, цвет.
`.uk-background-blend-luminosity`	Этот класс устанавливает режим наложения - `luminosity`, освещенность.

Вы также можете комбинировать их с классами цвета фона. Чтобы лучше понять, как работают фоновые режимы смешивания цветов, ознакомьтесь со статьей CSS Tricks.

«background-blend-mode»

Режим смешивания цветов с фоновыми изображениями. Наложение фонового изображения на фон.

Без модификатора

Multiply

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Без модификатора</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-multiply uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Multiply</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-multiply uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp); background-color: #f01ec6;">
            <p class="uk-h4">Multiply</p>
        </div>
    </div>
</div>

Screen

Exclusion

<div class="uk-child-width-1-2@s uk-grid-small uk-light" uk-grid>

    <div>
        <div class="uk-background-blend-screen uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle"
             style="background-image: url(images/photo.webp), url(images/photo.webp);
                    background-size: 100%, 105%;">
            <p class="uk-h4">Screen</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-exclusion uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle"
             style="background-image: url(images/photo.webp), url(images/photo.webp);">
            <p class="uk-h4">Exclusion</p>
        </div>
    </div>

</div>

Режим смешивания цветов с добавлением класса primary.

<div class="uk-background-blend-multiply uk-background-primary"></div>

Multiply

Screen

Overlay

Darken

Lighten

Color Dodge

Color Burn

Hard Light

Soft Light

Difference

Exclusion

Hue

Saturation

Color

Luminosity

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-background-blend-multiply uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Multiply</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-screen uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Screen</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-overlay uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Overlay</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-darken uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Darken</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-lighten uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Lighten</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color-dodge uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Color Dodge</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color-burn uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Color Burn</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-hard-light uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Hard Light</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-soft-light uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Soft Light</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-difference uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Difference</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-exclusion uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Exclusion</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-hue uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Hue</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-saturation uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Saturation</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Color</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-luminosity uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.webp);">
            <p class="uk-h4">Luminosity</p>
        </div>
    </div>
</div>