背景

一系列实用工具类，用于向元素添加不同的背景。

使用

要将背景颜色应用于元素，请添加以下类之一。每个修饰符的实际颜色由您选择的或自定义的 UIkit 样式定义。

类	描述
`.uk-background-default`	应用默认背景颜色。
`.uk-background-muted`	应用静音背景颜色。
`.uk-background-primary`	应用主要背景颜色。
`.uk-background-secondary`	应用次要背景颜色。

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

注意要调整您的内容以在每个背景上获得更好的可见性，请添加来自反转组件的 .uk-light 或 .uk-dark 类。使用填充组件向元素添加一些填充。

默认

静音

主要

次要

<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`	将背景图像缩放到其宽度和高度可以容纳在包含区域内的最大程度。
`.uk-background-width-1-1`	将背景图像缩放到填充可用宽度的 100%。
`.uk-background-height-1-1`	将背景图像缩放到填充可用高度的 100%。

注意使用这些类时，背景位置会自动移到中间，并且背景重复设置为不重复。

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

封面

包含

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

右上角

左上角

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

不重复

要防止较小的图像重复以填充背景区域，请添加 .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.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(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>

混合模式

添加以下类之一以将不同的混合模式应用于您的背景图像。您也可以将这些与背景颜色类组合使用。要更好地了解背景混合模式的工作原理，请查看这篇 CSS Tricks 文章。

类	描述
`.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。

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

正片叠底

滤色

覆盖层

变暗

变亮

颜色减淡

颜色加深

强光

柔光

差值

排除

色相

饱和度

颜色

亮度

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

文档

背景

使用

尺寸修饰符

位置修饰符

不重复

附加

响应式

混合模式