Lzh on GitHub

mix-blend-mode

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

快速参考

类名样式
mix-blend-normalmix-blend-mode: normal;
mix-blend-multiplymix-blend-mode: multiply;
mix-blend-screenmix-blend-mode: screen;
mix-blend-overlaymix-blend-mode: overlay;
mix-blend-darkenmix-blend-mode: darken;
mix-blend-lightenmix-blend-mode: lighten;
mix-blend-color-dodgemix-blend-mode: color-dodge;
mix-blend-color-burnmix-blend-mode: color-burn;
mix-blend-hard-lightmix-blend-mode: hard-light;
mix-blend-soft-lightmix-blend-mode: soft-light;
mix-blend-differencemix-blend-mode: difference;
mix-blend-exclusionmix-blend-mode: exclusion;
mix-blend-huemix-blend-mode: hue;
mix-blend-saturationmix-blend-mode: saturation;
mix-blend-colormix-blend-mode: color;
mix-blend-luminositymix-blend-mode: luminosity;
mix-blend-plus-darkermix-blend-mode: plus-darker;
mix-blend-plus-lightermix-blend-mode: plus-lighter;

示例

基本示例

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

<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 工具类来创建一个新的堆叠上下文，并防止其与后面的内容混合：

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

了解更多关于使用变体的信息，请查阅 变体文档。