Tailwind CSS - Background Blend Mode

Tailwind CSS background-blend-mode 是一个实用类，它提供了一种有效的方法来控制元素的背景图像如何与其背景颜色混合。

Tailwind CSS background-blend-mode 类

以下是 Tailwind CSS background-blend-mode 类的列表，这些类提供了一种有效的方法来控制元素的背景图像如何与其背景颜色混合。

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

• bg-blend-normal:此类用于设置背景混合模式"正常"。
• bg-blend-multiply:此类用于设置背景混合模式"乘法"。
• bg-blend-screen:此类用于设置背景混合模式"屏幕"。
• bg-blend-overlay:此类用于设置背景混合模式"叠加"。
• bg-blend-darken:此类用于设置背景混合模式"变暗"。
• bg-blend-lighten:此类用于设置背景混合模式变亮。
• bg-blend-color-dodge:此类用于设置背景混合模式 color-dodge。
• bg-blend-color-burn:此类用于设置背景混合模式 color-burn。
• bg-blend-hard-light:此类用于设置背景混合模式 hard-light。
• bg-blend-soft-light:此类用于设置背景混合模式 soft-light。
• bg-blend-difference:此类用于设置背景混合模式 Difference。
• bg-blend-exclusion:此类用于设置背景混合模式 Exclusion。
• bg-blend-hue:此类用于设置背景混合模式的色调。
• bg-blend-saturation:该类用于设置背景混合模式的饱和度。
• bg-blend-color:该类用于设置背景混合模式的颜色。
• bg-blend-luminosity:该类用于设置背景混合模式的亮度。

Tailwind CSS 背景混合模式类示例

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

设置背景混合模式

我们可以使用"bg-blend-*"实用程序设置背景混合模式，以控制元素的背景图像与其背景的混合方式颜色。

示例

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