# 遮罩/Overlay
創建擁有不同樣式的圖片遮罩效果。
## 用法
這個組件使用方法很簡單。創建一個定位遮罩層的語境,需要為包含圖片的容器元素添加 `.uk-overlay` 類。為一個子元素添加 `.uk-overlay-panel` 類創建真實的遮罩面板。通常你需要使用 `<figure` 和 `<figcaption>` 元素。
### Example

### Markup
```
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel">...</figcaption>
</figure>
```
* * *
## 通過hover撥動遮罩效果
默認情況下,遮罩層是可見的。添加 `.uk-overlay-hover` 類到遮罩層的容器,實現遮罩層的隱藏和hover撥動效果。
### Example

```
<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` 類即可。這會在諸如用在[幻燈片](slideshow.html)等情況下帶來很多方便。
* * *
## 遮罩背景
為遮罩層的容器添加 `.uk-overlay-background` 類,就能賦予遮罩層背景效果。
### Example

### Markup
```
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background">...</figcaption>
</figure>
```
* * *
## 遮罩層的圖標
基本上可以把任意內容放在遮罩層上面。你也可以添加 `.uk-overlay-icon` 類到遮罩面板中,將會顯示一個圖標。
### Example

### Markup
```
<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` | 遮罩層右對齊 |
### Example

### Markup
```
<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` 類名。
### Example

### Markup
```
<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` 的效果了。
### Example

### Markup
```
<!-- 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 組件](flex.html) 在垂直和水平方向上居中遮罩面板,而無需進行裁剪。
### Example

### Markup
```
<!-- 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>` 元素放入到遮罩層容器,并添加來自[效果組件](utility.html) 的 `.uk-position-cover` 類名。
重要 應用這個效果時,需要確保已經移除了帶有其他容器元素的 `<figcaption>` ,比如 `<div>` 。否則標簽不能生效。
### Example

### Markup
```
<figure class="uk-overlay">
<img src="" width="" height="" alt="">
<div class="uk-overlay-panel">...</div>
<a class="uk-position-cover" href=""></a>
</figure>
```
NOTE 只將遮罩面板作為鏈接,只需要將錨移至遮罩面板內即可。
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳