- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
遮罩
创建拥有不同样式的图片遮罩效果。
用法
这个组件使用方法很简单。创建一个定位遮罩层的语境,需要为包含图片的容器元素添加 .uk-overlay
类。为一个子元素添加 .uk-overlay-panel
类创建真实的遮罩面板。通常你需要使用 <figure
和 <figcaption>
元素。
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel">...</figcaption>
</figure>
通过hover拨动遮罩效果
默认情况下,遮罩层是可见的。添加 .uk-overlay-hover
类到遮罩层的容器,实现遮罩层的隐藏和hover拨动效果。
<figure class="uk-overlay uk-overlay-hover">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel">...</figcaption>
</figure>
active状态拨动遮罩/Toggle on active
想要在遮罩层的父容器处于actvie状态时拨动遮罩层,添加 .uk-overlay-active
类即可。这会在诸如用在幻灯片等情况下带来很多方便。
遮罩背景
为遮罩层的容器添加 .uk-overlay-background
类,就能赋予遮罩层背景效果。
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background">...</figcaption>
</figure>
遮罩层的图标
基本上可以把任意内容放在遮罩层上面。你也可以添加 .uk-overlay-icon
类到遮罩面板中,将会显示一个图标。
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-icon"></figcaption>
</figure>
遮罩定位
默认地,遮罩层从左上角开始覆盖整个父容器。要想定位和修剪遮罩层,添加以下类中的一个到遮罩面板中即可。
Class | 描述 |
---|---|
.uk-overlay-top | 遮罩层顶部对齐 |
.uk-overlay-bottom | 遮罩层底部对齐 |
.uk-overlay-left | 遮罩层左对齐 |
.uk-overlay-right | 遮罩层右对齐 |
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-top">...</figcaption>
</figure>
图片遮罩
要使用图片作为遮罩层,需要为带有 .uk-overlay-panel
的 <img>
元素添加 .uk-overlay-image
类名。
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<img class="uk-overlay-panel uk-overlay-image" src="" width="" height="" alt="">
</figure>
遮罩的过渡效果
遮罩层面板和图片都可以轻易做成动画效果。只需添加以下类中的一个到遮罩层面板或者 <img>
元素。记住,这玩意只能与 .uk-overlay-hover
或 .uk-overlay-active
组合使用。
Class | 描述 |
---|---|
.uk-overlay-slide-top | 添加这个类到遮罩面板,使它由顶部滑出。 |
.uk-overlay-slide-bottom | 添加这个类到遮罩面板,使它由底部滑出。 |
.uk-overlay-slide-left | 添加这个类到遮罩面板,使它由左边滑出。 |
.uk-overlay-slide-right | 添加这个类到遮罩面板,使它由右边滑出。 |
.uk-overlay-fade | 添加这个类到遮罩面板或图片,使它淡入。 |
.uk-overlay-scale | 添加这个类到图片使它放大。 |
.uk-overlay-spin | 添加这个类到图片,使它向右轻轻旋转。 |
.uk-overlay-grayscale | 添加这个类到图片,hover时去饱和度并着色。 |
NOTE 如果你想要图片具有动画效果,并希望遮罩面板总是可见的,只需要添加 .uk-ignore
类名到面板。这样,它就能无视 .uk-overlay-hover
的效果了。
<!-- This example is sliding in the overlay panel from the top -->
<figure class="uk-overlay uk-overlay-hover">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-slide-top">...</figcaption>
</figure>
<!-- This example is scaling up the image while the overlay panel always remains visible -->
<figure class="uk-overlay uk-overlay-hover">
<img class="uk-overlay-scale" src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-ignore">...</figcaption>
</figure>
<!-- This example is spinning the image and sliding in the overlay panel from the bottom -->
<figure class="uk-overlay uk-overlay-hover">
<img class="uk-overlay-spin" src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-slide-top">...</figcaption>
</figure>
遮罩与 flex
你可以使用 Flex 组件 在垂直和水平方向上居中遮罩面板,而无需进行裁剪。
<!-- In this example the overlay panel is centered vertically and horizontally -->
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>...</div>
</figcaption>
</figure>
<!-- In this example the overlay panel is aligned to the bottom -->
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-flex uk-flex-bottom">
<div>...</div>
</figcaption>
</figure>
遮罩层的锚
将整个遮罩层作为链接,只需要将 <a>
元素放入到遮罩层容器,并添加来自效果组件 的 .uk-position-cover
类名。
重要 应用这个效果时,需要确保已经移除了带有其他容器元素的 <figcaption>
,比如 <div>
。否则标签不能生效。
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<div class="uk-overlay-panel">...</div>
<a class="uk-position-cover" href=""></a>
</figure>
NOTE 只将遮罩面板作为链接,只需要将锚移至遮罩面板内即可。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论