覆盖／Cover

扩展图片，视频或iframe，使其覆盖整个容器，然后将您的内容部分放在它们上面。

用法

要使图像覆盖其父元素，请将 .uk-cover-container class类添加到父元素，并将 uk-cover 属性添加到图像。

<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>

注意 要在覆盖的元素上定位内容，使用 Position 组件。为了使您的内容具有更好的可见性，可以添加 Inverse 组件 中的 .uk-light 或 .uk-dark class。

  • <div class="uk-cover-container uk-height-medium">
    <img src="/images/dark.jpg" alt="" uk-cover>
</div>

视频

若要创建覆盖其父容器的视频，请将 uk-cover 属性添加到视频。 将容器元素包装在视频周围，并添加 .uk-cover-container class来裁剪内容。

Cover组件继承了 Video 组件 的所有属性，这意味着视频将被静音并自动播放。视频在不可见时会暂停，在再次可见后会继续播放。

<div class="uk-cover-container">
    <video uk-cover></video>
</div>
  • <div class="uk-cover-container uk-height-medium">
    <video src="/images/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
</div>

Iframe

要将Cover组件应用于iframe，需要将 uk-cover 属性添加到iframe。 现在将 .uk-cover-container 添加到iframe外围的container元素中以剪裁内容。

<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>
  • <div class="uk-cover-container uk-height-medium">
    <iframe src="/images/big_buck_bunny.mp4" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
</div>

响应式高度

要向封面图像添加响应行为，需要创建一个不可见的 <canvas> 并根据需要覆盖的区域的宽高比，为canvas指定 width 和 height 数值。 这样它将使图像的具有响应行为。

<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>
  • <div class="uk-cover-container">
    <canvas width="400" height="200"></canvas>
    <img src="/images/dark.jpg" alt="" uk-cover>
</div>

视口高度

添加Height 组件 中的 uk-height-viewport 属性将拉伸父元素的高度以填充整个视口。

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

组件选项

下面这些选项中的任何一个都可以应用于组件属性，如果需要同时使用多个属性请用分号分隔多个选项。 了解更多

选项 可用值 默认值 描述
automute Boolean true 将iframe的视频自动静音。
width Number undefined 元素的宽度。
height Number undefined 元素的高度。

JavaScript

进一步了解 JavaScript组件.

初始化

UIkit.cover(element, options);

上一篇： Countdown

下一篇： Description-list

cover.md

# 覆盖／Cover

<p class="uk-text-lead">扩展图片，视频或iframe，使其覆盖整个容器，然后将您的内容部分放在它们上面。</p>

## Usage-用法

要使图像覆盖其父元素，请将 `.uk-cover-container` class类添加到父元素，并将 `uk-cover` 属性添加到图像。

```html
<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>
```

**注意** 要在覆盖的元素上定位内容，使用  [Position 组件](position.md)。为了使您的内容具有更好的可见性，可以添加 [Inverse 组件](inverse.md) 中的 `.uk-light` 或 `.uk-dark` class。

```example
<div class="uk-cover-container uk-height-medium">
    <img src="images/dark.jpg" alt="" uk-cover>
</div>
```

***

## Video-视频

若要创建覆盖其父容器的视频，请将 `uk-cover` 属性添加到视频。 将容器元素包装在视频周围，并添加 `.uk-cover-container` class来裁剪内容。

Cover组件继承了 [Video 组件](video.md) 的所有属性，这意味着视频将被静音并自动播放。视频在不可见时会暂停，在再次可见后会继续播放。

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

```example
<div class="uk-cover-container uk-height-medium">
    <video src="images/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
</div>
```

***

## Iframe

要将Cover组件应用于iframe，需要将 `uk-cover` 属性添加到iframe。 现在将 `.uk-cover-container` 添加到iframe外围的container元素中以剪裁内容。

```html
<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>
```

```example
<div class="uk-cover-container uk-height-medium">
    <iframe src="images/big_buck_bunny.mp4" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
</div>
```

***

## Responsive height-响应式高度

要向封面图像添加响应行为，需要创建一个不可见的 `<canvas>` 并根据需要覆盖的区域的宽高比，为canvas指定 `width` 和 `height` 数值。 这样它将使图像的具有响应行为。

```html
<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>
```

```example
<div class="uk-cover-container">
    <canvas width="400" height="200"></canvas>
    <img src="images/dark.jpg" alt="" uk-cover>
</div>
```

***

## Viewport height-视口高度

添加[Height 组件](height.md#viewport-height) 中的 `uk-height-viewport` 属性将拉伸父元素的高度以填充整个视口。

```html
<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>
```

***

## Component options-组件选项

下面这些选项中的任何一个都可以应用于组件属性，如果需要同时使用多个属性请用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项     | 可用值   | 默认值   | 描述                           |
|:-----------|:--------|:----------|:--------------------------------------|
| `automute` | Boolean | true      | 将iframe的视频自动静音。 |
| `width`    | Number  | undefined | 元素的宽度。                  |
| `height`   | Number  | undefined | 元素的高度。                 |

***

## JavaScript

进一步了解 [JavaScript组件](javascript.md#programmatic-use).

### 初始化

```js
UIkit.cover(element, options);
```