Документация UIkit 3 на русском

Главная
Фоны

Коллекция служебных классов UIkit 3 для добавления различных эффектов фона.

Как использовать фоны в UIkit 3

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

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

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

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

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>

Модификаторы размеров

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

Класс	Описание
`.uk-background-cover`	Масштабирует фоновое изображение, чтобы полностью заполнить элемент.
`.uk-background-contain`	Масштабирует фонового изображения настолько, насколько его ширина и высота могут поместиться в рамках элемента.

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

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

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.jpg);">
            <p class="uk-h4">Cover</p>
        </div>
    </div>
    <div>
        <div class="uk-background-contain uk-background-muted uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/dark.jpg);">
            <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.jpg);">
            <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.jpg);">
            <p class="uk-h4">Top Left</p>
        </div>
    </div>
</div>

Значение фона no repeat

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

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

Свойство background-attachment

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

<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.jpg);"></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>

Сожмите окна браузера, чтобы увидеть эффект в примере ниже.

Image shown

Image not shown

<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.jpg);">
    <p class="uk-h4 uk-margin-remove uk-visible@m uk-light">Image shown</p>
    <p class="uk-h4 uk-margin-remove uk-hidden@m">Image not shown</p>
</div>

Режимы наложения

Добавьте один из следующих классов, чтобы применить различные режимы наложения к фоновому изображению. Вы также можете комбинировать их с классами цвета фона. Для лучшего понимания того, как работают режимы наложения фона, ознакомьтесь со свойством background-blend-mode.

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

<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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <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.jpg);">
            <p class="uk-h4">Luminosity</p>
        </div>
    </div>
</div>