tailwind 的 background-position 任意值语法必须用下划线连接坐标，如 bg-[50px_30px]，空格会导致失效；需搭配 bg-no-repeat 才能使 bg-cover/bg-contain 生效；多背景图不支持分层定位，svg data url 中 % 需编码。
background-position 用任意值语法时下划线不能写成空格
Tailwind 的 bg-[50px_30px] 这类任意值语法要求坐标之间用下划线 _ 连接，不是空格。写成 bg-[50px 30px] 会直接失效，浏览器解析为无效 CSS 声明。
常见场景是 CMS 后台允许用户输入偏移量，前端拼接时容易忽略格式校验。必须确保：数值单位明确（%、px、rem 都行）、无空格、用下划线分隔、整体包裹在方括号内。
-
bg-[center_top]✅ 等价于background-position: center top -
bg-[20%_10%]✅ 支持百分比组合 -
bg-['center top']❌ 引号内含空格，整个类名不被 Tailwind 识别
平铺背景必须显式禁用 repeat，否则 bg-cover/bg-contain 无效
很多人加了 bg-cover 却发现图片还是重复出现，根本原因是没关 background-repeat。Tailwind 不会自动帮你加 bg-no-repeat —— 它只管 background-size，不管其他。
只要背景图没加 bg-no-repeat，哪怕写了 bg-cover，浏览器仍按默认 repeat 渲染，结果就是整页糊满小图。
- 安全组合永远是：
bg-[url(...)] bg-cover bg-no-repeat bg-center - 如果要平铺（比如 SVG 背景纹理），就换用
bg-repeat，但必须去掉bg-cover，否则行为不可控 -
bg-contain和bg-cover都依赖no-repeat才能体现缩放效果
自定义 background-position 偏移量需配合 background-size 才有实际意义
background-position 的偏移效果，只有在 background-size 大于容器尺寸时才看得见。比如一张大图用 bg-cover 等比放大后溢出容器，此时 bg-[20%_10%] 才会把可视区域往右下挪一点；如果图本身比容器小、又没拉伸，那再调位置也只在左上角晃悠。
移动端尤其容易踩坑：iOS Safari 的 100vh 会被地址栏压缩，导致容器高度变小，原本 bg-cover 溢出的部分突然变少，bg-[center_top] 就可能把人脸切掉一半。
- 调试时打开 DevTools → Elements → Styles，手动改
background-size值观察变化 - 避免用
bg-[left_top]这种模糊值，它等价于0 0，不如直接写bg-left-top - 关键内容（如 logo、人脸）最好预留至少 15% 安全区，别紧贴边缘
多背景图时 position 和 size 必须严格一一对应
Tailwind 不支持为多背景图单独指定每层的 background-position 或 background-size。如果你用 bg-[url(a.jpg),url(b.svg)]，那么所有修饰类（bg-cover、bg-[10px_20px]）会同时作用于两层，无法差异化控制。
真正需要分层定位时，得退回到原生 CSS 写法，或拆成多个叠层元素（比如一个 div 贴底放 SVG 纹理，另一个绝对定位的 div 叠加主图）。
- 单层背景微调够用：用
bg-[url(...)] bg-cover bg-[50%_30%] - 双层以上建议放弃任意值语法，改用
style属性或配置文件里定义命名背景 - SVG Data URL 中的
%符号必须 URL 编码（如%23代替#），否则整个bg-[url(...)]解析失败
bg-cover + bg-[center_top] 也可能把关键信息切掉——这时候得回过头改图，而不是改 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
