跳至主要内容

文档

覆盖层

创建图像覆盖层，有多种样式。

用法

在图像后面的元素上添加 .uk-overlay 类以创建覆盖层面板。要创建位置上下文，请从 实用程序组件 添加 .uk-inline 类到围绕两者的容器元素。最后，从 定位组件 添加一个 .uk-position-* 类来对齐覆盖层。

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

注意 添加 .uk-light 或 .uk-dark 类，以便元素可以针对深色或浅色图像进行优化以获得更好的可见性。

  • 默认 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

样式修饰符

默认情况下，覆盖层有填充，但没有其他样式。添加以下修饰符类之一以向覆盖层添加背景色。

默认

对于简单的背景色，添加 .uk-overlay-default 类。

  • 默认 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    默认 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="images/photo.jpg" width="1800" height="1200" 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="images/photo.jpg" width="1800" height="1200" 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 类。

  • 默认 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    默认 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="images/photo.jpg" width="1800" height="1200" 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="images/photo.jpg" width="1800" height="1200" 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>

覆盖层图标

要显示覆盖层图标，请在覆盖层内的 <span> 元素中添加 uk-overlay-icon 属性。

<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="images/dark.jpg" width="1800" height="1200" alt="">
            <div class="uk-position-center">
                <span uk-overlay-icon></span>
            </div>
        </div>

    </div>
    <div>

        <div class="uk-inline uk-dark">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
            <div class="uk-overlay-default uk-position-cover">
                <div class="uk-position-center">
                    <span uk-overlay-icon></span>
                </div>
            </div>
        </div>

    </div>
</div>

定位

从 定位组件 添加一个 .uk-position-* 类来对齐覆盖层。

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

  • 顶部

    居中

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