Tailwind实现多层背景必须用bg-[...]语法显式声明并逗号分隔图层，图层顺序从右到左为底到顶；语义类无法叠加，background-color不参与background-blend-mode混合；需手动配置响应式与状态变体，且所有图层共享background-size等属性。
Tailwind 本身不提供“多层背景”的预设类，bg-[url()]、bg-gradient-to-r 等都是单层声明；真正实现多层，必须用 CSS 原生语法组合，靠 bg-[...] 任意值 + 显式图层堆叠顺序来控制。
多层背景必须用 bg-[...] 语法显式声明
Tailwind 的语义类（如 bg-blue-500、bg-gradient-to-br）无法叠加生效——它们最终都写入 background-color 或 background-image，后声明的会覆盖前声明的。唯一可靠方式是把所有图层写进一个 bg-[...] 值里，用英文逗号分隔。
-
bg-[url('/img/texture.png'),linear-gradient(to_bottom,rgba(0,0,0,0.2),transparent)]：图片在下，渐变在上 -
bg-[radial-gradient(circle_at_50%_50%,#fff_0%,transparent_50%),url('/img/photo.jpg')]：纯色光晕在上，照片在下 - 图层顺序从后往前渲染，即逗号最右边的是底层，最左边的是顶层
- 不能混用
bg-blue-500和bg-[url()]来凑层数——bg-blue-500编译为background-color，不属于background-image层，无法参与background-blend-mode
background-blend-mode 生效的前提是 ≥2 个 background-image 层
写了 bg-blend-multiply 却没反应？大概率是因为只有一层可混合图层。浏览器只对 background-image 列表中的项做混合运算，background-color 不算。
- ✅ 正确：
bg-[url('a.png'),url('b.png')] bg-blend-multiply（两个图片） - ✅ 正确：
bg-[url('photo.jpg'),linear-gradient(to_t,#00000080,transparent)] bg-blend-overlay（图片+渐变） - ❌ 错误：
bg-black/30 bg-[url('photo.jpg')] bg-blend-multiply（bg-black/30是background-color，不参与混合） - ⚠️ 兼容性注意：Safari ≤16.3 和 Firefox ≤111 对
background-color作为混合层支持极差，建议一律转成 base64 SVG 图层：bg-[url('data:image/svg+xml,%3Csvg%3E%3Crect%20fill=%22%23000%22%2F%3E%3C/svg%3E'),url('photo.jpg')]
响应式与状态下的多层背景要手动配断点和伪类
Tailwind 不会自动为 bg-[...] 生成响应式或 hover 变体，必须显式写出完整类名，并确保配置中启用了对应变体。
立即学习“前端免费学习笔记（深入）”；
- 要在小屏禁用纹理层：
bg-[url('photo.jpg')] sm:bg-[url('photo.jpg'),url('texture.svg')] - 悬停时叠加遮罩：
bg-[url('photo.jpg')] hover:bg-[url('photo.jpg'),linear-gradient(to_t,black,transparent)] - 需在
tailwind.config.js的variants中启用['responsive', 'hover']，否则sm:bg-[...]或hover:bg-[...]不会被编译 - 避免在
bg-[...]里写空格或未编码字符（如#必须写成%23），否则整个声明失效
最易被忽略的一点：多层背景的尺寸控制必须统一。比如 bg-cover 只作用于整个 background 复合属性，不会单独缩放某一层；若某层是 radial-gradient，它默认按元素尺寸铺满，而 url() 层又设了 bg-contain，结果就是错位——所有图层共享同一套 background-size、background-position，没法单独调。
