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>

列印頁面