封面

展开图片、视频或 iframe 以覆盖其整个容器，并在其顶部放置您自己的内容。

用法

要让图片覆盖其父元素，请向父元素添加 .uk-cover-container 类，并向图片添加 uk-cover 属性。

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

注意要在覆盖元素的顶部定位内容，请使用定位组件。要调整您的内容以提高可见度，请添加反转组件中的 .uk-light 或 .uk-dark 类。

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

视频

要创建一个覆盖其父容器的视频，请向视频添加 uk-cover 属性。将一个容器元素包裹在视频周围，并向其添加 .uk-cover-container 类以剪裁内容。

封面组件继承了视频组件的所有属性，这意味着视频将静音并自动播放。视频将在不可见时暂停，并在再次可见时恢复播放。

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

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

Iframe

要将封面组件应用于 iframe，您需要向 iframe 添加 uk-cover 属性。现在，向 iframe 周围的容器元素添加 .uk-cover-container 类以剪裁内容。

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

<div class="uk-cover-container uk-height-medium">
    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="1920" height="1080" allowfullscreen uk-cover></iframe>
</div>

响应式高度

要向封面图片添加响应式行为，您需要创建一个不可见的 <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>

视窗高度

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

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

组件选项

任何这些选项都可以应用于组件属性。用分号分隔多个选项。了解更多

选项	值	默认值	描述
`automute`	布尔值	true	尝试自动静音 iframe 的视频。
`width`	数字		元素的宽度。
`height`	数字		元素的高度。

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.cover(element, options);

文档

封面