本文へスキップ

ドキュメント

背景

要素に様々な背景を追加するためのユーティリティクラスのコレクションです。

使用方法

要素に背景色を適用するには、次のクラスのいずれかを追加します。各修飾子の実際のカラーは、選択またはカスタマイズしたUIkitスタイルによって定義されます。

クラス 説明
.uk-background-default デフォルトの背景色を適用します。
.uk-background-muted ミュートされた背景色を適用します。
.uk-background-primary プライマリ背景色を適用します。
.uk-background-secondary セカンダリ背景色を適用します。 
<div class="uk-background-primary"></div>

注記 各背景での視認性を向上させるためにコンテンツを調整するには、反転コンポーネントから.uk-lightまたは.uk-darkクラスを追加します。パディングコンポーネントを使用して、要素にパディングを追加します。

  • デフォルト

    ミュート

    プライマリ

    セカンダリ

  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-background-default uk-padding uk-panel">
            <p class="uk-h4">Default</p>
        </div>
    </div>
    <div>
        <div class="uk-background-muted uk-padding uk-panel">
            <p class="uk-h4">Muted</p>
        </div>
    </div>
    <div>
        <div class="uk-background-primary uk-light uk-padding uk-panel">
            <p class="uk-h4">Primary</p>
        </div>
    </div>
    <div>
        <div class="uk-background-secondary uk-light uk-padding uk-panel">
            <p class="uk-h4">Secondary</p>
        </div>
    </div>
</div>

サイズ修飾子

このコンポーネントには、固有の比率を維持しながら背景画像のサイズを指定するクラスが含まれています。

クラス 説明
.uk-background-cover 背景画像を拡大して、コンテナ領域全体を完全に覆います。
.uk-background-contain 背景画像を、幅と高さがコンテナ領域内に収まる範囲まで拡大します。
.uk-background-width-1-1 背景画像を拡大して、利用可能な幅の100％を埋めます。
.uk-background-height-1-1 背景画像を拡大して、利用可能な高さの100％を埋めます。

注記 これらのクラスを使用する場合、背景の位置は自動的に中央に移動し、background-repeatはno-repeatに設定されます。

<div class="uk-background-cover"></div>

  • カバー

    コンテイン

  • <div class="uk-child-width-1-2@s uk-light" uk-grid>
    <div>
        <div class="uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/dark.jpg);">
            <p class="uk-h4">Cover</p>
        </div>
    </div>
    <div>
        <div class="uk-background-contain uk-background-muted uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/dark.jpg);">
            <p class="uk-h4">Contain</p>
        </div>
    </div>
</div>

位置修飾子

画像の背景位置を変更するには（デフォルトでは領域の左上にあります）、次のクラスのいずれかを追加します。

クラス 説明
.uk-background-top-left 画像の初期位置は左上にあります。
.uk-background-top-center 画像の初期位置は上部にあります。
.uk-background-top-right 画像の初期位置は右上にあります。
.uk-background-center-left 画像の初期位置は左側にあります。
.uk-background-center-center 画像の初期位置は中央にあります。
.uk-background-center-right 画像の初期位置は右側にあります。
.uk-background-bottom-left 画像の初期位置は左下にあります。
.uk-background-bottom-center 画像の初期位置は下部にあります。
.uk-background-bottom-right 画像の初期位置は右下にあります。 
<div class="uk-background-top-left"></div>

  • 右上

    左上

  • <div class="uk-child-width-1-2@s uk-light" uk-grid>
    <div>
        <div class="uk-background-top-right uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-middle uk-flex-center" style="background-image: url(images/dark.jpg);">
            <p class="uk-h4">Top Right</p>
        </div>
    </div>
    <div>
        <div class="uk-background-top-left uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-middle uk-flex-center" style="background-image: url(images/dark.jpg);">
            <p class="uk-h4">Top Left</p>
        </div>
    </div>
</div>

繰り返しなし

小さな画像が背景領域を埋めるために繰り返されないようにするには、.uk-background-norepeatクラスを追加します。

<div class="uk-background-norepeat"></div>

アタッチメント

サイトをスクロールしても画像の位置が変わらないように、固定の背景アタッチメントを適用することもできます。

<div class="uk-background-fixed"></div>
  • <div class="uk-background-fixed uk-background-center-center uk-height-medium uk-width-large" style="background-image: url(images/dark.jpg);"></div>

レスポンシブ

次のクラスのいずれかを追加して、特定のビューポートサイズへの背景画像の表示を制限します。これは、テキストが読みにくくなるような形で、画像とコンテンツがスマートフォン画面で重なっている場合に最適です。

クラス 説明
.uk-background-image@s 640px以上のデバイス幅で背景画像を表示します。
.uk-background-image@m 960px以上のデバイス幅で背景画像を表示します。
.uk-background-image@l 1200px以上のデバイス幅で背景画像を表示します。
.uk-background-image@xl 1600px以上のデバイス幅で背景画像を表示します。 
<div class="uk-background-image@m"></div>

ブラウザウィンドウのサイズを変更して、以下の例で効果を確認してください。

  • 画像が表示される

    画像が表示されない

  • <div class="uk-background-image@m uk-background-cover uk-background-muted uk-height-medium uk-width-large uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/dark.jpg);">
    <p class="uk-h4 uk-margin-remove uk-visible@m uk-light">Image shown</p>
    <p class="uk-h4 uk-margin-remove uk-hidden@m">Image not shown</p>
</div>

ブレンドモード

次のクラスのいずれかを追加して、背景画像に異なるブレンドモードを適用します。これらは背景色のクラスと組み合わせることもできます。背景ブレンドモードの動作についてより深く理解するには、このCSS Tricksの記事を参照してください。

クラス 説明
.uk-background-blend-multiply このクラスはブレンドモードを乗算に設定します。
.uk-background-blend-screen このクラスはブレンドモードをスクリーンに設定します。
.uk-background-blend-overlay このクラスはブレンドモードをオーバーレイに設定します。
.uk-background-blend-darken このクラスはブレンドモードをダークンに設定します。
.uk-background-blend-lighten このクラスはブレンドモードをライトンに設定します。
.uk-background-blend-color-dodge このクラスはブレンドモードをカラードッジに設定します。
.uk-background-blend-color-burn このクラスはブレンドモードをカラーバーンに設定します。
.uk-background-blend-hard-light このクラスはブレンドモードをハードライトに設定します。
.uk-background-blend-soft-light このクラスはブレンドモードをソフトライトに設定します。
.uk-background-blend-difference このクラスはブレンドモードをディファレンスに設定します。
.uk-background-blend-exclusion このクラスはブレンドモードをエクスクルージョンに設定します。
.uk-background-blend-hue このクラスはブレンドモードを色相に設定します。
.uk-background-blend-saturation このクラスはブレンドモードを彩度に設定します。
.uk-background-blend-color このクラスはブレンドモードをカラーに設定します。
.uk-background-blend-luminosity このクラスはブレンドモードを輝度に設定します。 
<div class="uk-background-blend-multiply uk-background-primary"></div>

  • 乗算

    スクリーン

    オーバーレイ

    ダークン

    ライトン

    カラードッジ

    カラーバーン

    ハードライト

    ソフトライト

    ディファレンス

    エクスクルージョン

    色相

    彩度

    カラー

    輝度

  • <div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-background-blend-multiply uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Multiply</p>
       </div>
    </div>
    <div>
        <div class="uk-background-blend-screen uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Screen</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-overlay uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Overlay</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-darken uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Darken</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-lighten uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Lighten</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color-dodge uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Color Dodge</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color-burn uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Color Burn</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-hard-light uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Hard Light</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-soft-light uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Soft Light</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-difference uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Difference</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-exclusion uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Exclusion</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-hue uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Hue</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-saturation uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Saturation</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-color uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Color</p>
        </div>
    </div>
    <div>
        <div class="uk-background-blend-luminosity uk-background-primary uk-background-cover uk-height-small uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(images/photo.jpg);">
            <p class="uk-h4">Luminosity</p>
        </div>
    </div>
</div>