background-image未显示主因是容器无宽高或路径错误；路径相对于css文件而非html；需检查network是否404、computed样式是否解析成功；铺满用cover/contain/100% 100%配合center和no-repeat。
background-image 为什么没显示
图没出来，八成是路径或尺寸问题。CSS 默认不会拉伸背景图填满容器，如果容器本身没宽高、或者图片路径错，就啥也看不到。
-
background-image的路径是相对于 CSS 文件位置的，不是 HTML 页面；用绝对路径或./开头更稳 - 容器（比如
div）必须有明确的width和height，否则高度为 0，图自然不可见 - 检查浏览器开发者工具里 Network 标签，看图片是否 404；Elements 标签里看 computed 样式中
background-image是否解析成功
怎么让背景图铺满整个容器
靠 background-size 控制缩放行为，但不同值效果差别很大，别瞎设 cover 就完事。
-
background-size: cover：等比缩放并裁剪，保证填满——适合 banner，但可能切掉边缘内容 -
background-size: contain：等比缩放并完整显示全图——留白常见，适合 logo 或图标场景 -
background-size: 100% 100%：强制拉伸，会变形，慎用 - 配合
background-position: center和background-repeat: no-repeat是基础组合
如何设置背景图但保留文字可选、可聚焦
别用 <img alt="html如何将一张图背景图片" > + position: absolute 模拟背景图，那会让语义丢失、屏幕阅读器读不到、键盘焦点跳过。
- 纯装饰图：用
background-image完全 OK，无需 alt - 图文强关联（比如图是内容一部分）：必须用
<img src="..." alt="描述文字">，再用伪元素或额外容器叠加装饰层 - 如果真要用背景图又想支持高对比度模式，加
@media (prefers-contrast: high)降级方案
inline SVG 当背景图行不行
可以，而且免请求、易控制颜色和缩放，但编码和转义容易出错。
立即学习“前端免费学习笔记（深入）”；
- SVG 内容要 URL 编码，
变 <code>%3C，>变%3E，空格变%20，推荐用在线工具生成 data URL - 直接写在
background-image: url("data:image/svg+xml,...")里，注意引号嵌套别乱 - 不支持外部引用（如
<use href="icon.svg#star"></use>），所有内容得内联 - IE 不支持 data URL 作背景，如需兼容，得 fallback 到 PNG
