遮罩／Overlay

# 遮罩／Overlay

<p class="uk-text-lead">创建一个拥有各种样式的图片遮罩层。</p>

## Usage-用法

将 `.uk-overlay` class添加到紧跟图像后面的元素内以创建遮罩面板。 要关联定位，请将 [Utility 组件](utility.md#inline)中的 `.uk-inline` class添加到图片和遮罩面板共同的的父容器元素中。然后，从 [Position 组件](position.md)中添加一个 `.uk-position-*` class类对齐遮罩。

```html
<div class="uk-inline">
    <img src="" alt="">
    <div class="uk-overlay uk-position-bottom"></div>
</div>
```

**注意** 添加 `.uk-light` 或 `.uk-dark` class，可以对元素进行优化，使其在深色或浅色图像上有更好的可见性。

```example
<div class="uk-inline">
    <img src="images/photo.jpg" alt="">
    <div class="uk-overlay uk-light uk-position-bottom">
        <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
```

***

## Style modifiers-样式修饰

遮罩默认拥有padding，但没有其他样式。使用以下 class 可以为遮罩添加背景色。

### 默认

添加 `.uk-overlay-default` class来使用默认背景颜色。

```example
<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay uk-overlay-default uk-position-bottom">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

    </div>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay-default uk-position-cover"></div>
            <div class="uk-overlay uk-position-bottom uk-dark">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

    </div>
</div>
```

***

### 强调

添加 `.uk-overlay-primary` class使用醒目的背景颜色。

```example
<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

    </div>
    <div>

        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay-primary uk-position-cover"></div>
            <div class="uk-overlay uk-position-bottom uk-light">
                <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

    </div>
</div>
```

***

## Overlay icon-遮罩中的图标

要在遮罩层上叠加使用图标，请将 `uk-overlay-icon` 属性添加到遮罩内的 `<span>` 元素中。

```html
<div class="uk-position-center">
    <span uk-overlay-icon></span>
</div>
```

```example
<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-inline uk-light">
            <img src="images/dark.jpg" alt="">
            <div class="uk-position-center">
                <span uk-overlay-icon></span>
            </div>
        </div>

    </div>
    <div>

        <div class="uk-inline uk-dark">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay-default uk-position-cover">
                <div class="uk-position-center">
                    <span uk-overlay-icon></span>
                </div>
            </div>
        </div>

    </div>
</div>
```

***

## Position-定位

从 [Position 组件](position.md) 添加一个 `.uk-position-*` class来对齐遮罩。

```html
<div class="uk-overlay uk-position-top"></div>
```

```example
<div class="uk-child-width-1-2@m" uk-grid>
    <div>
        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay uk-overlay-default uk-position-top">
                <p>Top</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline">
            <img src="images/photo.jpg" alt="">
            <div class="uk-overlay uk-overlay-default uk-position-center">
                <p>Center</p>
            </div>
        </div>
    </div>
</div>
```