返回介绍

覆盖

发布于 2019-05-26 16:28:19 字数 2274 浏览 909 评论 0 收藏 0

扩展图片或视频至覆盖整个容器。

这个组件允许你使用图片、对象甚至iframe(images, objects or even iframes)来创建全屏效果。无论是什么元素,它都将垂直居中、水平居中并且不会失去原有的比例即实现覆盖它的容器。你还可以在图片或者视频上面放入附加内容,比如文字或图片等。

用法

这个覆盖组件具有不同的用法,取决于你究竟是使用的背景图片、对象或者iframe。最简单的方式就是为带有背景图片的 <div> 元素添加 .uk-cover-background 类。

Markup

<div class="uk-cover-background">...</div>

视频

创建一个覆盖它的父容器的视频,添加 .uk-cover-object 类到视频。然后用一个容器元素包裹视频并为该容器添加 .uk-cover 类来裁剪内容。

Markup

<div class="uk-cover">
    <video class="uk-cover-object" width="" height="">
<source src="" type="">
    </video>
</div>

Iframe

要将覆盖组件应用到 iframe ,你只需要为 iframe 添加 data-uk-cover 属性。然后,再添加 .uk-cover 类到包含iframe的容器来裁剪内容。

Markup

<div class="uk-cover">
    <iframe data-uk-cover src="" width="" height="" frameborder="0" allowfullscreen></iframe>
</div>

响应式

为覆盖图片添加响应式行为,你需要添加 .uk-invisible 类到 <img> 元素,并将它放在覆盖元素内部。这样的话,它就能适应图片的响应式行为了。

注意 添加 效果组件 中的 .uk-height-viewport 类,会扩展父容器的高度填满整个视口。

Markup

<div class="uk-cover-background">
    <img class="uk-invisible" src="" width="" height="" alt="">
</div>

视频

为视频添加响应式行为,你同样需要为覆盖容器添加 .uk-position-relative 类,并将 .uk-position-absolute 类添加到覆盖对象上。对于irame也是这样操作。

Markup

<div class="uk-cover uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <video class="uk-cover-object uk-position-absolute" width="" height="">
<source src="" type="">
    </video>
</div>

内容的定位/Position content

你还能在覆盖元素上面绝对定位内容。要实现这个效果,只需添加 效果组件 中的 .uk-position-cover 类到图片或视频后面的容器元素。如果想要实现垂直居中并且水平居中,那就使用 Flex 组件 吧。

Markup

<div class="uk-cover-background uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">...</div>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文