メインコンテンツへスキップ

ドキュメント

オーバーレイ

異なるスタイルの画像オーバーレイを作成します。

使い方

オーバーレイパネルを作成するには、画像の後ろの要素に.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>