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：此类用于设置背景混合模式为亮度。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 背景混合模式类示例

以下示例将说明 Tailwind CSS 背景混合模式类实用程序。

设置背景混合模式

我们可以使用 'bg-blend-*' 实用程序来设置背景混合模式，以控制元素的背景图像(s)应如何与其背景颜色混合。

示例

Open Compiler

<!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'。

示例

Open Compiler

<!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>

打印页面