Tailwind 默认不提供 bg-blend-multiply 类，写了也不会生效；必须通过配置扩展 backgroundBlendMode 并启用插件，且元素需同时设置至少两个背景层（如图片+半透色）才能触发 multiply 混合。
bg-blend-multiply 在 Tailwind 中根本不存在
Tailwind CSS 默认不提供 bg-blend-multiply 这类工具类。它的 bg-blend-* 系列（如 bg-blend-normal、bg-blend-overlay）仅在 v3.4+ 版本中通过 background-blend-mode 插件启用，且默认未开启。直接写 bg-blend-multiply 会无效——编译后无对应 CSS 规则，浏览器自然不生效。
如何让 bg-blend-multiply 生效（v3.4+）
必须手动扩展 Tailwind 配置，显式添加支持：
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundBlendMode: {
multiply: 'multiply',
screen: 'screen',
overlay: 'overlay',
}
}
},
plugins: [
require('@tailwindcss/forms'),
// 必须启用这个插件才能解析 backgroundBlendMode 扩展
require('@tailwindcss/typography'),
]
}
- 配置后需重启 dev server，否则新类名不会被识别
- 类名格式为
bg-blend-multiply（不是blend-multiply或bg-multiply） - 该属性只对**多背景图**或**背景图 + 背景色**共存时起作用；单张背景图 + 透明色无混合效果
混合模式生效的必要 HTML 结构
仅加 bg-blend-multiply 不够，必须满足混合前提：
- 元素需同时设置至少两个可混合层：例如
bg-[url(...)]+bg-black，或bg-[url(a.jpg),url(b.jpg)] - 颜色层建议用半透或纯色（如
bg-black/50），否则完全遮盖图片 - 务必确认图片加载成功——404 的
url()会导致整个background-image失效，混合自然不触发
典型可用写法：
立即学习“前端免费学习笔记（深入）”；
<div class="bg-[url('/img/texture.png')] bg-black/30 bg-blend-multiply w-64 h-64"></div>
常见失效原因和调试方法
遇到“写了没反应”，优先检查这几处：
- 浏览器是否支持：
background-blend-mode在 Safari 8+/Chrome 35+/Firefox 30+ 支持，但 IE 完全不支持 - DevTools 里看 computed 样式：确认
background-blend-mode: multiply是否真实存在且未被覆盖 - 检查
background-image值是否为空或语法错误（比如路径含空格未编码、引号缺失） - 避免与
bg-cover/bg-contain混用导致尺寸错乱——混合是像素级运算，背景裁剪异常会影响视觉结果
混合模式本身不改变 DOM 结构或布局，但它高度依赖渲染层的真实像素叠加，任何一环断开都会静默失败。
