background-blend-mode

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

快速参考

类	属性
bg-blend-normal	background-blend-mode: normal;
bg-blend-multiply	background-blend-mode: multiply;
bg-blend-screen	background-blend-mode: screen;
bg-blend-overlay	background-blend-mode: overlay;
bg-blend-darken	background-blend-mode: darken;
bg-blend-lighten	background-blend-mode: lighten;
bg-blend-color-dodge	background-blend-mode: color-dodge;
bg-blend-color-burn	background-blend-mode: color-burn;
bg-blend-hard-light	background-blend-mode: hard-light;
bg-blend-soft-light	background-blend-mode: soft-light;
bg-blend-difference	background-blend-mode: difference;
bg-blend-exclusion	background-blend-mode: exclusion;
bg-blend-hue	background-blend-mode: hue;
bg-blend-saturation	background-blend-mode: saturation;
bg-blend-color	background-blend-mode: color;
bg-blend-luminosity	background-blend-mode: luminosity;

示例

基础示例

使用 bg-blend-difference 和 bg-blend-saturation 等工具类，控制元素的背景图与背景色如何混合：

bg-blend-multiply

bg-blend-soft-light

bg-blend-overlay

<!-- [!code classes:bg-blend-multiply,bg-blend-soft-light,bg-blend-overlay] -->
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>

响应式设计

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

<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten md:bg-blend-darken ...">
 <!-- ... -->
</div>

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