CSS背景图不显示主因是路径错误或容器无高度；路径需相对CSS文件，推荐绝对路径；须设no-repeat、center/cover及min-height:100vh；移动端fixed失效属已知限制。
background-image 用 url() 时路径写错
浏览器找不到图片，控制台报 404，页面背景空白——十有八九是 url() 里的路径没对上。CSS 文件和图片的相对位置，不是相对于 HTML 文件，而是相对于 CSS 文件本身。
- 假设
style.css在/css/style.css，图片在/images/bg.jpg，就得写url(../images/bg.jpg) - 用绝对路径更稳：
url(/images/bg.jpg)（从站点根目录算起） - URL 中空格、中文、特殊字符必须编码，比如空格要写成
%20，否则解析失败 - 别漏掉引号——
url("bg.jpg")可以，url(bg.jpg)在文件名含点或连字符时可能出问题
background-repeat 默认铺满，不想平铺得关掉
直接写 background-image 后，图片会横向纵向重复填充整个容器，看起来像墙纸——这不是 bug，是默认行为。想让它只显示一次、居中、不拉伸，必须显式覆盖。
- 最简写法：
background: url(bg.jpg) no-repeat center/cover; -
no-repeat关闭平铺；center控制定位；cover或contain控制缩放方式 - 单独写时注意顺序：
background-repeat: no-repeat;必须在background-image之后，否则可能被简写属性重置 - 如果容器没设高宽，且内部无内容，背景可能“看不见”——因为高度塌陷，得给
min-height或height
HTML 元素选错导致背景不显示
写了样式但背景死活不出来？先看是不是把样式加到了没渲染区域的元素上，比如 、 下空的 <div> 却没设尺寸，或者用了 <code>display: none 的父容器。
- 优先查
body或html：它们默认高度只有内容高，加min-height: 100vh;才能撑满视口 - 避免用
<img alt="HTML中如何插入背景图片_HTML插入背景图片样式写法【背景设置】" >标签假装背景——它无法像 CSS 背景那样cover或fixed定位 - 内联样式（
style="..."）里写background-image是合法的，但路径仍按 CSS 规则解析，不是相对于 HTML 文件 - 检查是否被其他规则覆盖：用浏览器开发者工具看 computed 样式里
background-image是否为none
background-attachment: fixed 在移动端失效
想做视差滚动效果，写了 background-attachment: fixed;，结果在 iOS Safari 和多数安卓浏览器里完全不动——这是已知限制，不是你代码错了。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 移动端 WebKit 内核禁用
fixed背景，防止滚动性能问题，连带影响background-position: fixed - 替代方案：用
position: sticky;+ 伪元素模拟，或 JS 监听 scroll 做位移计算（但要注意节流） - 如果只是想让背景随内容滚动，干脆删掉
background-attachment——它的默认值就是scroll - 注意
will-change: transform或backface-visibility: hidden有时能绕过部分渲染 bug，但不保证兼容
背景图片看着简单，但路径、尺寸、定位、设备适配这四块，任意一个卡住都会白忙活。尤其是路径和容器高度，90% 的“没显示”问题都出在这俩地方。
