background-image不生效主因是路径错误，因css中url路径相对css文件而非html；需检查路径、尺寸、repeat设置，并注意构建工具资源规则差异。
background-image 用法和路径坑
直接写 background-image: url("xxx") 不生效，八成是路径错了。浏览器加载背景图时，路径是相对于当前 CSS 文件位置计算的，不是 HTML 文件——这点和 <img src alt="html怎么设置背景图片_html背景图像添加设置【实操】" > 完全不同。
常见错误现象：404 Not Found、页面空白但控制台没报错、图片只在本地双击 HTML 时显示，一丢到服务器就消失。
- 用相对路径时，确认 CSS 文件在哪：比如 CSS 在
/Static/css/main.css，图在/static/images/bg.jpg，就得写url("../images/bg.jpg") - 嫌路径麻烦？改用绝对路径（以
/开头）：url("/images/bg.jpg")，前提是图真在网站根目录下的/images/里 - URL 中空格、中文、特殊符号必须编码，或干脆别用；推荐用短横线命名，如
hero-bg.jpg
background-size 怎么让图铺满又不失真
background-size: cover 和 contain 看似简单，但选错会导致裁切严重或留白难看，尤其在响应式布局里。
使用场景：全屏 Banner、登录页背景、卡片装饰图。
立即学习“前端免费学习笔记（深入）”；
-
cover：等比缩放填满容器，可能裁边——适合强调氛围、不怕丢细节的图 -
contain：等比缩放完整显示全图，可能留白——适合 Logo 或信息图 - 想拉伸不变形又填满？
background-size: 100% 100%，但会失真，慎用 - 现代项目建议加
background-size: cover+background-attachment: fixed做视差效果，但注意 ios safari 对fixed支持不稳定
背景图不显示？检查 background-repeat 和 background-position
默认 background-repeat: repeat，小图会平铺成“瓷砖墙”。你以为没加载，其实是被重复盖住了。
常见错误现象：图明明存在，但页面只看到左上角一小块，或者满屏杂乱纹理。
- 取消平铺：
background-repeat: no-repeat - 居中显示：
background-position: center center（两个值分别控制水平/垂直） - 想固定在右下角水印？写
background-position: right bottom或具体像素如background-position: 20px 30px - 如果用了
background-clip或background-origin，优先级会影响最终定位，一般不用动它们
HTML 元素没尺寸，背景图死活不出来
这是最隐蔽也最高频的问题：div 没内容、没设置宽高、没浮动或 flex 布局，高度塌陷为 0，图自然没地方画。
性能影响：浏览器不会为高度为 0 的元素加载背景图（部分浏览器），所以控制台可能连请求都看不到。
- 快速验证：给元素加个
border: 1px solid red，看盒子是否存在 - 临时调试：加
min-height: 100vh强制占满视口，再逐步替换成真实布局逻辑 - Flex 容器子项要背景图？确保父容器有
display: flex且子项没被flex: 0 0 auto锁死尺寸 - 用伪元素
::before扛背景图更可控，还能避免内容干扰，例如给空 div 加content: ""+display: block
背景图的「不可见」往往不是语法错，而是路径、尺寸、重复行为三者叠加导致的静默失败。尤其在构建工具（Vite/webpack）里，public 目录和 src/assets 下的资源引用规则完全不同，这里最容易漏掉配置。