UIkit3.x文档

遮罩/Overlay

创建一个拥有各种样式的图片遮罩层。

用法

.uk-overlay class 添加到紧跟图像后面的元素内以创建遮罩面板。 要关联定位,请将Utility 组件中的 .uk-inline class 添加到图片和遮罩面板共同的的父容器元素中。然后,从 Position 组件中添加一个.uk-position-* 类对齐遮罩。

<div class="uk-inline">
    <img src="" alt="">
    <div class="uk-overlay uk-position-bottom"></div>
</div>

Note 添加 .uk-light 或者 .uk-dark class,可以对元素进行优化,使其在深色或浅色图像上有更好的可见性。

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-inline">
        <img src="/skin/ukv3/images/photo.jpg" alt="">
        <div class="uk-overlay uk-light uk-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

样式修饰

遮罩默认拥有padding,但没有其他样式。使用以下 class 可以为遮罩添加背景色。

默认

添加.uk-overlay-default class来使用默认背景颜色。

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

     

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
    
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-default uk-position-bottom">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay-default uk-position-cover"></div>
                <div class="uk-overlay uk-position-bottom uk-dark">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
    </div>

强调

添加.uk-overlay-primary class使用醒目的背景颜色。

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

     

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
    
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay-primary uk-position-cover"></div>
                <div class="uk-overlay uk-position-bottom uk-light">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
    </div>

遮罩中的图标

要在遮罩层上叠加使用图标,请将uk-overlay-icon 属性添加到遮罩内的 <span> 元素中。

<div class="uk-position-center">
    <span uk-overlay-icon></span>
</div>
  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
    
            <div class="uk-inline uk-light">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-position-center">
                    <span uk-overlay-icon></span>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="uk-inline uk-dark">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay-default uk-position-cover">
                    <div class="uk-position-center">
                        <span uk-overlay-icon></span>
                    </div>
                </div>
            </div>
    
        </div>
    </div>

定位

Position 组件添加一个.uk-position-* class来对齐遮罩。

<div class="uk-overlay uk-position-top"></div>
  • Top

    Center

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-default uk-position-top">
                    <p>Top</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img src="/skin/ukv3/images/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-default uk-position-center">
                    <p>Center</p>
                </div>
            </div>
        </div>
    </div>