# 遮罩/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 只将遮罩面板作为链接，只需要将锚移至遮罩面板内即可。