Tailwind CSS - 背景混合模式

Tailwind CSS 背景混合模式是一個實用程式類，它提供了一種有效的方法來控制元素的背景影像應如何與其背景顏色混合。

Tailwind CSS 背景混合模式類

以下是 **Tailwind CSS 背景混合模式** 類別的列表，它們提供了一種有效的方法來處理元素的背景影像應如何與其背景顏色混合。

類	CSS 屬性
bg-blend-normal	background-blend-mode: normal;
bg-blend-multiply	background-blend-mode: multiply;
bg-blend-screen	background-blend-mode: screen;
bg-blend-overlay	background-blend-mode: overlay;
bg-blend-darken	background-blend-mode: darken;
bg-blend-lighten	background-blend-mode: lighten;
bg-blend-color-dodge	background-blend-mode: color-dodge;
bg-blend-color-burn	background-blend-mode: color-burn;
bg-blend-hard-light	background-blend-mode: hard-light;
bg-blend-soft-light	background-blend-mode: soft-light;
bg-blend-difference	background-blend-mode: difference;
bg-blend-exclusion	background-blend-mode: exclusion;
bg-blend-hue	background-blend-mode: hue;
bg-blend-saturation	background-blend-mode: saturation;
bg-blend-color	background-blend-mode: color;
bg-blend-luminosity	background-blend-mode: luminosity;

Tailwind CSS 背景混合模式類的功能

**bg-blend-normal:** 此類用於將背景混合模式設定為正常。
**bg-blend-multiply:** 此類用於將背景混合模式設定為正片疊底。
**bg-blend-screen:** 此類用於將背景混合模式設定為濾色。
**bg-blend-overlay:** 此類用於將背景混合模式設定為疊加。
**bg-blend-darken:** 此類用於將背景混合模式設定為變暗。
**bg-blend-lighten:** 此類用於將背景混合模式設定為變亮。
**bg-blend-color-dodge:** 此類用於將背景混合模式設定為顏色減淡。
**bg-blend-color-burn:** 此類用於將背景混合模式設定為顏色加深。
**bg-blend-hard-light:** 此類用於將背景混合模式設定為強光。
bg-blend-soft-light：此類用於設定背景混合模式為柔光。
bg-blend-difference：此類用於設定背景混合模式為差值。
bg-blend-exclusion：此類用於設定背景混合模式為排除。
bg-blend-hue：此類用於設定背景混合模式為色相。
bg-blend-saturation：此類用於設定背景混合模式為飽和度。
bg-blend-color：此類用於設定背景混合模式為顏色。
bg-blend-luminosity：此類用於設定背景混合模式為亮度。

Tailwind CSS 背景混合模式類示例

以下示例將說明 Tailwind CSS 背景混合模式類實用程式。

設定背景混合模式

我們可以使用 'bg-blend-*' 實用程式來設定背景混合模式，以控制元素的背景影像(s)應如何與其背景顏色混合。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        div {
            background: url('images/tree.jpg'), 
                        url('images/border.png');
        }
    </style>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Background Blend Mode
    </h2>
    <div class="flex w-full text-center">
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-saturation">
            saturation
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-luminosity">
            luminosity
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-darken">
            darken
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-hue">
            hue
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-normal">
            normal
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-overlay">
            overlay
        </div>
    </div>
</body>

</html>

在懸停時更改背景混合模式

我們將保持混合模式為 'mix-blend-multiply'，並在懸停在第二個 div 元素上時將其更改為 'mix-blend-overlay'。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        div {
            background: url('images/tree.jpg'), 
                        url('images/border.png');
        }
    </style>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Background Blend Mode
    </h2>
    <Please Hover on Each Div<
    <div class="flex w-full text-center">
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-saturation">
            saturation
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-luminosity">
            luminosity
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-darken">
            darken
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-hue">
            hue
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-normal">
            normal
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-overlay">
            overlay
        </div>
    </div>
</body>

</html>

列印頁面