跳至主要內容

文件

背景

一組實用程式類別，可將不同的背景新增至元素。

用法

若要將背景色彩套用至元素，請新增下列其中一個類別。每個修飾符的實際色彩由您選擇或自訂的 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 設定為不重複。

<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 在裝置寬度為640 像素和更大的情況下顯示背景影像。
.uk-background-image@m 在裝置寬度為960 像素和更大的情況下顯示背景影像。
.uk-background-image@l 在裝置寬度為1200 像素和更大的情況下顯示背景影像。
.uk-background-image@xl 在裝置寬度為1600 像素和更大的情況下顯示背景影像。 
<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>