UIkit3.x文档

覆盖

扩展图片,视频或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>

响应式高度

要使遮罩图像(cover image)具有响应特性,需要创建一个不可见的<canvas> 并根据需要被覆的区域的宽高比,为canvas指定 widthheight 数值。

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