背景图不显示主因是路径错误或元素无高度；css中url()路径相对于css文件位置而非html，如/css/main.css引用/images/bg.jpg需写url("../images/bg.jpg")，且元素须有宽高才能渲染。
背景图不显示，90% 是路径写错了，或元素没高度。
background-image 路径为什么总 404？
CSS 中的 url() 是相对于 CSS 文件位置算的，不是 HTML 文件——这点和 <img src> 完全不同。比如 CSS 在 /css/main.css，图片在 /images/bg.jpg，就得写 url("../images/bg.jpg")。
- 用相对路径，别用
C:\xxx\bg.jpg或D:/xxx/bg.jpg，浏览器直接忽略 - 路径里有空格或中文？换成
hero-bg.jpg这类命名，省事又稳定 - 本地双击打开 HTML（
file://协议）时，Chrome / Edge 会禁掉 background-image 加载，必须起本地服务（如python3 -m http.server） - 检查浏览器开发者工具的 Network 标签页，看图片请求是不是返回了
404—— 这比猜“为什么没出来”快得多
元素有背景图但啥也看不见？
不是图没加载，是容器本身没尺寸。<div> 默认高度为 0，背景图无处可画。
<ul>
<li>给元素设明确的 <code>height 或 min-height；全屏背景推荐 min-height: 100vh，别只写 height: 100%
display: none 或 visibility: hidden
background-color: #eee 做兜底，防止图片加载失败时页面发白或发黑background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("bg.jpg") 叠一层遮罩更可控background-size: cover 和 contain 到底怎么选？
硬写像素值（如 100px 200px）基本等于放弃响应式，除非你真要固定尺寸。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
background-size: cover：等比缩放填满容器，可能裁边；适合 banner、首屏大图 -
background-size: contain：等比缩放确保整张图可见，可能留白；适合 logo、图标类背景 -
background-size: 100% 100%：强制拉伸，一定变形；仅限明确需要该效果的场景 - 老安卓 WebView 对
cover支持不稳定，可加一行background-size: -webkit-cover兼容
能不能用 ![]()
替 background-image？
不能。语义和行为都错位了。
-
<img>是内容型元素：会被屏幕阅读器读出、影响 SEO、默认有 margin、无法用z-index压到文字下面 - 如果图含运营文案、按钮、关键信息，它就不是背景，该用
<img>+alt - CSS 背景图不阻塞 DOM 解析；
<img>会（尤其没加loading="lazy"时） - 想实现
cover效果？<img>配width: 100%; height: auto;不行，裁剪逻辑靠 CSS 更可靠
最常被忽略的一点：background-image 的加载行为依赖于元素是否“可渲染”。高度为 0、display: none、或者被 transform 缩成不可见的元素，浏览器可能根本不发起图片请求——这时候连 Network 里都看不到 404。
