跳到主要内容

文档

背景

一组实用类，用于为元素添加不同的背景。

用法

要为元素应用背景颜色，请添加以下类之一。每个修饰符的实际颜色由您选择或自定义的 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%。

注意 使用这些类时，背景位置会自动移动到中间，并且 background-repeat 设置为 no-repeat。

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

Multiply

Screen

叠加层

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>