1. 效果
  2. mix-blend-mode

效果

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;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 mix-blend-overlaymix-blend-soft-light 等工具来控制元素的内容和背景如何与同一堆叠上下文中的其他内容混合:

¥Use utilities like mix-blend-overlay and mix-blend-soft-light to control how an element's content and background is blended with other content in the same stacking context:

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

隔离混合(Isolating blending)

¥Isolating blending

在父元素上使用 isolate 工具创建新的堆叠上下文并防止与后面的内容混合它:

¥Use the isolate utility on the parent element to create a new stacking context and prevent blending with content behind it:

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

响应式设计(Responsive design)

¥Responsive design

mix-blend-mode 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号