bg-[url()]单独使用无法显示图片，因仅设置background-image而未控制尺寸、重复和定位，需搭配bg-cover、bg-no-repeat、bg-center等行为类；路径须相对于HTML根目录（如public/），不可用相对路径；容器须有宽高，否则背景不可见。
bg-[url()]单独写根本不会显示图片
因为bg-[url()]只设置background-image属性，不控制尺寸、重复、定位——浏览器按默认规则渲染：平铺、不缩放、从左上角开始。你看到的不是“没加载”，而是几十个重复小图块挤在角落，或者因容器无宽高而完全不可见。
- 必须搭配行为类，比如
bg-cover、bg-no-repeat、bg-center -
bg-[url('/img.jpg')] bg-cover bg-no-repeat bg-center才可能正常显示 - 漏掉任意一个，都可能导致视觉上“消失”——尤其
bg-cover和bg-no-repeat最容易被忽略
路径错是404，不是CSS写错
Tailwind里bg-[url('/pattern.png')]中的路径，是相对于最终生成的 HTML 文件（即 Web 服务器根目录），不是相对于 CSS 或组件文件。Vite/Next.js/React 的 public/ 目录就是根目录，所以图片必须放public/img/pattern.png，然后写bg-[url('/img/pattern.png')]。
- 写成
bg-[url('./img/pattern.png')]或bg-[url('../src/assets/pattern.png')]→ 404 - 写成
bg-[url('/public/img/pattern.png')]→ 多了一层/public，也 404 - DevTools 的 Network 标签页里看请求状态码：200 才算路径对；404 就别调 CSS，先改路径
动态拼接 bg-[] 有 XSS 风险
别把用户输入直接塞进bg-[url('${userInput}')]，比如bg-['"]onerror=alert(1)//']会被原样注入 style 属性，触发执行。
- 允许的输入只能是预设值（
top、center、bottom left）或严格校验的单位值（^\d+(px|rem|%|em)$） - 更安全的做法是用
switch映射用户输入到固定 class 名：userPos === 'top' ? 'bg-top' : 'bg-center' - 任意值语法
bg-[50px_30px]里不能有空格，bg-[50px 30px]会失效
容器没宽高，背景图就不存在
Tailwind 不会给元素自动设尺寸。如果父容器是空的、或没设height/min-h-类，背景图所在的 div 高度为 0，图自然不可见。
立即学习“前端免费学习笔记（深入）”；
- 常见场景：Flex 容器里只有一个文字节点，没设
min-h-screen或h-full - 检查 Computed Styles 里
background-image是否为none：是 → 路径错或被覆盖；不是 → 看height和background-size是否生效 - 兜底建议：加
bg-gray-200之类背景色，能立刻判断是图没加载，还是容器塌陷
tailwind.config.js里的backgroundImage扩展没生效。 
