mix-blend-mode

用于控制元素如何与背景混合的工具类。

快速参考

类	属性
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;

示例

基础示例

使用 mix-blend-overlay 和 mix-blend-soft-light 等工具类，控制元素的内容和背景如何与同一层叠上下文中的其他内容混合：

<!-- [!code classes:mix-blend-multiply] -->
<div class="flex justify-center -space-x-14">
  <div class="bg-blue-500 mix-blend-multiply ..."></div>
  <div class="bg-pink-500 mix-blend-multiply ..."></div>
</div>

隔离混合

在父元素上使用 isolate 工具类以创建新的层叠上下文，防止与其后方的内容混合：

<!-- [!code classes:mix-blend-multiply,isolate] -->
<div class="isolate flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

<div class="flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

响应式设计

在 mix-blend-mode 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：

<div class="mix-blend-multiply md:mix-blend-overlay ...">
 <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。