# 遮罩/Overlay 創建擁有不同樣式的圖片遮罩效果。 ## 用法 這個組件使用方法很簡單。創建一個定位遮罩層的語境，需要為包含圖片的容器元素添加 `.uk-overlay` 類。為一個子元素添加 `.uk-overlay-panel` 類創建真實的遮罩面板。通常你需要使用 `&lt;figure` 和 `&lt;figcaption&gt;` 元素。 ### 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` 的 `&lt;img&gt;` 元素添加 `.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> ``` * * * ## 遮罩的過渡效果 遮罩層面板和圖片都可以輕易做成動畫效果。只需添加以下類中的一個到遮罩層面板或者 `&lt;img&gt;` 元素。記住，這玩意只能與 `.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> ``` * * * ## 遮罩層的錨 將整個遮罩層作為鏈接，只需要將 `&lt;a&gt;` 元素放入到遮罩層容器，并添加來自[效果組件](utility.html) 的 `.uk-position-cover` 類名。 重要 應用這個效果時，需要確保已經移除了帶有其他容器元素的 `&lt;figcaption&gt;` ，比如 `&lt;div&gt;` 。否則標簽不能生效。 ### 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 只將遮罩面板作為鏈接，只需要將錨移至遮罩面板內即可。