必须搭配尺寸、定位、重复类才生效，因bg-[url(...)]仅设图源；常见原因有路径错误、未设background-size/repeat、容器无宽高等。
不能只写 bg-[url(...)] 就完事，必须搭配尺寸、定位、重复行为才有效果。
为什么 bg-[url('/img.jpg')] 加了却看不到图？
最常见原因是背景图没加载成功，或浏览器按默认规则渲染成平铺小块 —— Tailwind 不会自动帮你加 background-size 或 background-repeat。
- 先打开 DevTools 的 Network 标签页，确认图片请求返回 200；404 比 CSS 写错更常见
- 检查 Computed Styles 里
background-image是否为none，如果是，说明路径错或被覆盖 -
bg-[url(...)]只设图源，不控制行为。必须显式加bg-cover、bg-no-repeat、bg-center等类才能看出效果 - 路径必须相对于构建后的 HTML 文件（比如 Vite 中是
public/下的路径），不是相对于 CSS 文件。建议统一放public/，用bg-[url('/pattern.png')]
如何用 tailwind.config.js 预定义背景图？
适合多处复用、路径固定、且不想暴露 URL 字符串的场景。但配置后必须重启开发服务器，热更新不生效。
- 在
theme.extend.backgroundImage里加键值对，键名即 class 名：'hero': "url('/images/hero.jpg')" - 键名只能用小写字母、数字、短横线（
hero-bg✅，HeroBg❌） - 使用时必须组合行为类：
bg-hero bg-cover bg-center，单独bg-hero会按默认repeat渲染 - SVG 内联需手动 URL 编码：# →
%23，%3C，> →%3E，否则解析失败
怎么安全地动态设置背景图位置？
别直接拼接用户输入进 bg-[...]，XSS 风险真实存在 —— bg-['"]onerror=alert(1)//'] 这种字符串会被原样注入 style 属性。
- 任意值语法
bg-[50px_30px]支持 px/%/rem，但括号内不能有空格（bg-[50px_30px]✅，bg-[50px 30px]❌） - 生产环境必须校验输入：只允许
^\d+(px|rem|%|em)$或预设安全值（top、center、bottom left等） - 更稳妥的做法是用 switch 映射用户输入到固定 class 名，避免字符串拼接
- 加载失败兜底靠 CSS：
background-color会透出来，所以自定义 class 里要同时写background-color和background-image
真正难调的从来不是类名拼写，而是容器有没有明确宽高、图片物理分辨率够不够、以及任意值里的单位和空格是否合规 —— 这些细节一错，图就消失得无声无息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
