最稳妥的背景图实现方式是直接在style属性或CSS文件中使用background-image，需注意路径、引号、MIME类型和构建工具相对路径四大易错点。
background-image 直接写在 style 里最稳
用 background-image 是插入背景图的正路，别想着用 <img alt="如何在html中插入背景图片 并保持平铺" > 标签盖一层——它不是背景，没法平铺，还破坏语义。直接写在元素的 style 属性或 CSS 文件里，控制力强、兼容性好。
常见错误是路径写错，比如本地开发时用 file:// 打开 HTML，但图片路径是相对路径，浏览器会因安全策略拒绝加载；或者路径少了个 ./ 或多了一层 ../，控制台报 404。
- 推荐用相对路径，如
background-image: url('./assets/bg-pattern.png'); - 如果图片在同级目录，就用
url('bg.png')；在上一级，用url('../images/bg.png') - 路径中含空格或中文？赶紧改掉，否则部分浏览器（尤其 Safari）会挂
- URL 值必须加引号（单/双均可），不加引号遇到特殊字符会解析失败
background-repeat 控制是否平铺及方向
默认就是平铺（repeat），但很多人不知道它有四个取值：除了 repeat，还有 repeat-x（只横向）、repeat-y（只纵向）、no-repeat（完全不铺）。想实现“只横铺不竖铺”，就得明确写 background-repeat: repeat-x;，不能靠猜。
- 平铺行为受
background-size影响：如果设了background-size: cover;，平铺就失效了，变成缩放填充 - 旧版 IE8 只支持
repeat/no-repeat，repeat-x和repeat-y会退化成repeat - 想让小图无缝平铺，务必确认图片边缘对得上，否则会出现明显接缝
别漏掉 background-size 和 background-position 配合
只设 background-image 和 background-repeat 不够，尤其当图片尺寸和容器不匹配时，容易出现意外拉伸或裁剪。平铺本身不依赖 background-size，但如果你调了它，就得小心副作用。
立即学习“前端免费学习笔记（深入）”；
- 保持平铺前提下微调起始位置？用
background-position: 2px 5px;，单位支持px、%、em - 误写
background-size: 100% 100%;会导致单张图撑满容器，平铺消失 - 真要缩放后平铺？得用
background-size配合background-repeat，但注意：Chrome 支持background-size+repeat缩放后平铺，Safari 15.4 之前有 bug，会只铺一次再拉伸
内联 style vs 外部 CSS 的坑
用 style="background-image: url(...)..." 写在标签里，改起来快，但没法复用、难维护，而且所有转义和引号都得手动处理。比如路径含单引号，你又在外层用了单引号，就会断掉。
- HTML 内联 style 中，如果 URL 含单引号，外层必须用双引号：
style="background-image: url('a'b.png');"→ 错；style="background-image: url("a'b.png");"→ 对 - 服务器开启 MIME 类型校验（如 Nginx 默认配置）时，CSS 里引用的图片若后缀名不标准（比如
.webp但响应头是image/jpeg），可能被拦截 - 构建工具（如 Vite/Webpack）处理
url()时，相对路径是相对于 CSS 文件位置，不是 HTML 文件——这点常被忽略，导致开发正常、打包后 404
平铺本身很简单，但路径、引号、MIME、构建路径这四点，任一出错都会让图不显示，且错误不报在控制台，只默默留白。调试时先打开 Network 面板，看图片请求是否 200，比瞎猜快得多。
