Tailwind CSS home page
  1. 特效
  2. 混合模式

Quick reference

Class
Properties
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-* 实用程序来控制元素的内容如何与背景混合。

<div class="flex justify-center -space-x-14">
  <div class="mix-blend-multiply bg-blue-400 ..."></div>
  <div class="mix-blend-multiply bg-pink-400 ..."></div>
</div>

条件应用

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:mix-blend-overlay 来仅 在 hover应用 mix-blend-overlay.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:mix-blend-overlay 来应用 mix-blend-overlay 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.