Компонент Фон 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(/demo/img/dark.jpg);">
                <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(/demo/img/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(/demo/img/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(/demo/img/dark.jpg);">
                <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(/demo/img/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>

Пример

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

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

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

  • <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(/demo/img/dark.jpg);">
        <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

    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(/demo/img/photo.jpg);">
                <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(/demo/img/photo.jpg);">
                <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(/demo/img/photo.jpg); 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(/demo/img/photo.jpg), url(/demo/img/photo.jpg);
                        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(/demo/img/photo.jpg), url(/demo/img/photo.jpg);">
                <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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/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(/demo/img/photo.jpg);">
                <p class="uk-h4">Luminosity</p>
            </div>
        </div>
    </div>