覆盖

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

用法

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

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

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

<div class="uk-cover-container uk-height-medium">
    <img src="/skin/ukv3/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="https://yootheme.com/site/images/media/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="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" 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="/skin/ukv3/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>

组件选项

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

Option	Value	Default	Description
`automute`	Boolean	true	将iframe的视频自动静音。
`width`	Number	undefined	元素的宽度。
`height`	Number	undefined	元素的高度。

JavaScript

进一步了解 JavaScript 组件.

初始化

UIkit.cover(element, options);

UIkit3.x文档