UIkit3.x文档

背景

实用程序类的集合，用于向元素添加不同的背景。

用法

要将背景色应用于元素，请添加以下类之一。每个修饰class的实际色彩取决于你选用的或定制的 UIkit 样式。

Class Description
.uk-background-default 应用默认背景色。
.uk-background-muted 应用柔和背景色。
.uk-background-primary 应用主要的、突出的背景色。
.uk-background-secondary 应用次要的、辅助背景色。 
<div class="uk-background-primary"></div>

Note 要让内容在各种背景上具有良好的可见性，需要添加反向组件中的 .uk-light or .uk-dark class 来增加对比度。 可以使用 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>

尺寸调整

该组件以下的class可以在保持背景固定宽高比的情况下指定背景图像的大小。

Class Description
.uk-background-cover 按比例缩放背景图像并完全覆盖内容区域。
.uk-background-contain 缩放背景图像，直到它的宽度或高度填满内容区域。

Note 在使用这些class时，背景定位会自动地以其中间位置为准，并且将 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(/skin/ukv3/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(/skin/ukv3/images/dark.jpg);">
            <p class="uk-h4">Contain</p>
        </div>
    </div>
</div>

定位调整

要更改图像的背景位置（默认情况下背景图像位于该区域的左上角），请添加以下类之一。

Class Description
.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(/skin/ukv3/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(/skin/ukv3/images/dark.jpg);">
            <p class="uk-h4">Top Left</p>
        </div>
    </div>
</div>

不重复

要防止较小的图像重复填充背景区域，请添加 .uk-background-norepeat class.

<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(/skin/ukv3/images/dark.jpg);"></div>

响应式

添加以下class可以限制背景图片只在特定视口尺寸下显示。比如，在手机屏幕上图片和内容重叠可能导致文字难以辨认，那么使用下面这些class将会非常有用。

Class Description
.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(/skin/ukv3/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>

混合模式

添加以下 class 中任意一个为背景图片应用不同的混合模式。可以与背景色彩class一起使用为了更好地理解背景混合模式是怎样工作的，查看这篇文章吧： CSS Tricks article.

Class Description
.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.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(/skin/ukv3/images/dark.jpg);">
            <p class="uk-h4">Luminosity</p>
        </div>
    </div>
</div>