背景／Background

# 背景／Background

<p class="uk-text-lead">实用程序类的集合，用于向元素添加不同的背景。</p>

## Usage-用法

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

| Class                      | 描述                           |
|:---------------------------|:--------------------------------------|
| `.uk-background-default`   | 应用默认背景色。 |
| `.uk-background-muted`     | 应用柔和背景色。     |
| `.uk-background-primary`   | 应用主要的、突出的背景色。 |
| `.uk-background-secondary` | 应用次要的、辅助背景色。 |

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

**注意** 要让内容在各种背景上具有良好的可见性，需要添加[反向组件](inverse.md)中的 `.uk-light` 或 `.uk-dark`类来增加对比度。 可以使用 [Padding 组件](padding.md) 向元素添加一些内边距。

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

***

## Size modifiers-尺寸调整

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

| Class                    | 描述                                                                                    |
|:-------------------------|:-----------------------------------------------------------------------------------------------|
| `.uk-background-cover`   | 按比例缩放背景图像并完全覆盖内容区域。                           |
| `.uk-background-contain` | 缩放背景图像，直到它的宽度或高度填满内容区域。 |
| `.uk-background-width-1-1`  | 缩放背景图像使图像填充满容器的100％宽度。 |
| `.uk-background-height-1-1` | 缩放背景图像使图像填充满容器的100％高度。 |

**注意** 在使用这些class时，背景定位会自动地以其中间位置为准，并且将 background-repeat 设置为 no-repeat（不重复）。

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

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

***

## Position modifiers-定位调整

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

| Class                          | 描述                                                           |
|:-------------------------------|:----------------------------------------------------------------------|
| `.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`  | 图像的初始位置在右下角。 |

```html
<div class="uk-background-top-left"></div>
```

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

***

## No repeat-不重复

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

```html
<div class="uk-background-norepeat"></div>
```

***

## Attachment-附着

您还可以应用固定背景附着效果，这样在滚动页面时图像将保持在固定位置。

```html
<div class="uk-background-fixed"></div>
```

```example
<div class="uk-background-fixed uk-background-center-center uk-height-medium uk-width-large" style="background-image: url(images/dark.jpg);"></div>
```

***

## Responsive-响应式

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

| Class                     | 描述                                                            |
|:--------------------------|:-----------------------------------------------------------------------|
| `.uk-background-image@s`  | 在设备宽度为 _640px_ 及以上的设备上显示背景图片。  |
| `.uk-background-image@m`  | 在设备宽度为 _960px_ 及以上的设备上显示背景图片。  |
| `.uk-background-image@l`  | 在设备宽度为 _1200px_ 及以上的设备上显示背景图片。 |
| `.uk-background-image@xl` | 在设备宽度为 _1600px_ 及以上的设备上显示背景图片。 |

```html
<div class="uk-background-image@m"></div>
```

调整浏览器窗口的大小查看下面示例的效果。

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

***

## Blend modes-混合模式

添加以下 class 中任意一个为背景图片应用不同的混合模式。可以与背景色彩class一起使用为了更好地理解背景混合模式是怎样工作的，查看这篇文章吧： [CSS Tricks article](https://css-tricks.com/almanac/properties/b/background-blend-mode/).


| Class                              | 描述                                    |
|:-----------------------------------|:-----------------------------------------------|
| `.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`  | 此类将混合模式设置为亮度。  |

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

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