- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
覆盖
扩展图片或视频至覆盖整个容器。
这个组件允许你使用图片、对象甚至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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论