Tailwind CSS - 混合混合模式

Tailwind CSS 混合混合模式是一个实用程序类，它提供了一种有效的方法来控制元素应该如何与背景混合。

Tailwind CSS 混合混合模式类

以下是提供有效方法处理元素如何与背景混合的Tailwind CSS 混合混合模式类的列表。

类	CSS 属性
mix-blend-normal	mix-blend-mode: normal;
mix-blend-multiply	mix-blend-mode: multiply;
mix-blend-screen	mix-blend-mode: screen;
mix-blend-overlay	mix-blend-mode: overlay;
mix-blend-darken	mix-blend-mode: darken;
mix-blend-lighten	mix-blend-mode: lighten;
mix-blend-color-dodge	mix-blend-mode: color-dodge;
mix-blend-color-burn	mix-blend-mode: color-burn;
mix-blend-hard-light	mix-blend-mode: hard-light;
mix-blend-soft-light	mix-blend-mode: soft-light;
mix-blend-difference	mix-blend-mode: difference;
mix-blend-exclusion	mix-blend-mode: exclusion;
mix-blend-hue	mix-blend-mode: hue;
mix-blend-saturation	mix-blend-mode: saturation;
mix-blend-color	mix-blend-mode: color;
mix-blend-luminosity	mix-blend-mode: luminosity;
mix-blend-plus-darker	mix-blend-mode: plus-darker;
mix-blend-plus-lighter	mix-blend-mode: plus-lighter;

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

mix-blend-normal: 此类用于将混合模式设置为正常。
mix-blend-multiply: 此类用于将混合模式设置为正片叠底。
mix-blend-screen: 此类用于将混合模式设置为滤色。
mix-blend-overlay: 此类用于将混合模式设置为叠加。
mix-blend-darken: 此类用于将混合模式设置为变暗。
mix-blend-lighten: 此类用于将混合模式设置为变亮。
mix-blend-color-dodge: 此类用于将混合模式设置为颜色减淡。
mix-blend-color-burn: 此类用于将混合模式设置为颜色加深。
mix-blend-hard-light: 此类用于将混合模式设置为强光。
mix-blend-soft-light: 此类用于将混合模式设置为柔光。
mix-blend-difference: 此类用于将混合模式设置为差值。
mix-blend-exclusion: 此类用于将混合模式设置为排除。
mix-blend-hue: 此类用于将混合模式设置为色相。
mix-blend-saturation: 此类用于将混合模式设置为饱和度。
mix-blend-color: 此类用于将混合模式设置为颜色。
mix-blend-luminosity: 此类用于将混合模式设置为亮度。
mix-blend-plus-darker: 此类用于将混合模式设置为更暗。
mix-blend-plus-lighter: 此类用于将混合模式设置为更亮。

Tailwind CSS 混合混合模式类示例

以下示例将演示 Tailwind CSS 混合混合模式类实用程序。

设置元素的混合混合模式

在以下示例中，我们将创建两个 div 并使用 'mix-blend-*' 来混合两个 div 的颜色。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Mix Blend Mode
    </h2>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800 
                    w-36 h-36 rounded-full">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    w-36 h-36 rounded-full">
        </div>
    </div>
</body>

</html>

更改悬停时的混合混合模式

我们将混合模式保持在 'mix-blend-multiply'，并在悬停在第二个 div 元素上时将其更改为 'mix-blend-overlay'。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Mix Blend Mode
    </h2>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800
                    w-36 h-36">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    hover:mix-blend-overlay
                    w-36 h-36 ">
        </div>
    </div>
</body>

</html>

打印页面