跳到主要内容

文档

Background

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

用法

要为元素应用背景色，请添加下列任意一个类。每个修饰符的具体颜色由你所选用或自定义的 UIkit 样式决定。

类 描述
.uk-background-default 应用默认背景色。
.uk-background-muted 应用弱化背景色。
.uk-background-primary 应用主背景色。
.uk-background-secondary 应用次背景色。 
<div class="uk-background-primary"></div>

注意 为了让内容在各个背景上都更易辨识，请添加反色组件中的 .uk-light 或 .uk-dark 类。使用内边距组件为元素添加适当的内边距。

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 在宽高都能容纳于所在区域的前提下，尽可能放大背景图片。
.uk-background-width-1-1 缩放背景图片，使其填满可用宽度的 100%。
.uk-background-height-1-1 缩放背景图片，使其填满可用高度的 100%。

注意 使用这些类时，背景位置会自动移到中间，并且 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>

不重复

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

调整浏览器窗口大小，观察下方示例中的效果。

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>

混合模式

添加下列任意一个类，可以为背景图片应用不同的混合模式。你也可以把它们与背景色类组合使用。要更好地理解背景混合模式的工作原理，请参阅 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

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>