覆盖

扩展图像、视频或 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，您需要将 uk-cover 属性添加到 iframe。现在将 .uk-cover-container 类添加到 iframe 周围的容器元素以裁剪内容。

<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);

文档

覆盖