Фоны

Коллекция служебных классов 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>