Tailwind CSS - 混合模式

Tailwind CSS：混合模式

Tailwind 提供了 mix-blend-mode CSS 属性的实用工具类，该属性控制元素内容如何与其直接父元素的内容混合。

可用混合模式类

Tailwind 包含了所有标准 mix-blend-mode 值的实用工具。这些工具使你能够创建引人注目的视觉效果，例如与背景图像交互的文本或分层颜色效果。

类名	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;`

注意： 截至 v3.0 版本，非标准的 mix-blend-plus-darker 和 mix-blend-plus-lighter 实用工具不属于核心 Tailwind CSS 框架，因为它们缺乏广泛的浏览器支持。

混合模式的实际应用

一个常见的用例是将文本或图形元素混合到背景图像之上。在此示例中，我们将在图像上方放置一个标题和一个半透明的叠加层，使用 mix-blend-mode 来创建动态的色彩效果。

示例：文本与图像叠加层混合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- For demonstration purposes only. Use the CLI for production. -->
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Mix Blend Mode Example</title>
</head>
<body class="bg-slate-800 p-4 sm:p-8">

  <h1 class="text-center text-3xl font-bold text-white mb-8">Image Blend Effect</h1>

  <div class="grid max-w-4xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 mx-auto">

    <!-- Example 1: Multiply -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1695653422853-06d84a441334?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjE2NA&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-cyan-400 mix-blend-multiply"></div>
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-screen">MULTIPLY</h2>
    </div>

    <!-- Example 2: Overlay -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1698239923884-3e839e3a6c22?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjI4Mw&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-fuchsia-500 mix-blend-overlay"></div>
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white">OVERLAY</h2>
    </div>

    <!-- Example 3: Difference -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1698862523223-285b73a4b95f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjM1Mg&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-difference">DIFFERENCE</h2>
    </div>

  </div>
</body>
</html>

在此示例中：

每个卡片的父 div 都被设置为 relative 和 isolate。isolate 类创建了一个新的堆叠上下文，这对于 mix-blend-mode 可预测地工作至关重要，它确保混合效果被限制在卡片内部，而不会与页面背景混合。
<img> 标签用于背景，通过 absolute inset-0 定位以填充容器。
在第一个卡片中，一个带有 bg-cyan-400 和 mix-blend-multiply 的 div 被分层放置在顶部。这会将青色与图像像素相乘。其上方的文本使用 mix-blend-screen 来创建高对比度效果。
其他卡片展示了不同的混合模式，以实现多样的视觉效果。

悬停时改变混合模式

与 Tailwind 中的大多数实用工具一样，你可以使用 hover: 等状态变体有条件地应用 mix-blend-mode。这允许实现交互式和动态效果。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex h-screen items-center justify-center bg-slate-900">
  <div class="flex items-center justify-center -space-x-16">
    <div class="h-48 w-48 rounded-full bg-cyan-500"></div>
    <div class="h-48 w-48 rounded-full bg-fuchsia-500 mix-blend-lighten transition-all duration-300 hover:mix-blend-darken">
    </div>
  </div>
</body>
</html>

在此示例中，两个圆形的重叠区域最初使用 mix-blend-lighten。当你悬停在第二个圆形上方时，hover:mix-blend-darken 类被激活，改变了混合模式，从而改变了重叠部分的颜色。