background-image 失效主因是元素无宽高或被覆盖；需确保容器有尺寸、检查 background 简写覆盖、用相对路径（相对于 css 文件）、避免 file:// 协议限制；搭配 cover/contain、center、no-repeat 控制显示效果；响应式中需监听 resize 或改用 img+Object-fit；文字可读性靠半透遮罩或 text-shadow 保障。
background-image 用法和常见失效原因
背景图片不显示，八成不是图片路径问题，而是 background-image 没生效或被覆盖。CSS 中它本身不占布局空间，如果元素高度为 0，图就“看不见”——哪怕路径完全正确。
- 确保父容器有明确宽高，或子内容撑开它（
div默认是 0 高） - 检查是否被其他样式覆盖，比如
background简写属性会清掉background-image - 路径优先用相对路径，但注意是相对于 CSS 文件位置，不是 html 文件
- 本地开发时，直接双击打开 HTML 可能因 file:// 协议限制导致图片加载失败，建议用本地服务器（如
python3 -m http.server）
让背景图“好看”的三个关键 CSS 属性
光有图不够，得控制它怎么铺、怎么对齐、怎么缩放。核心就是 background-size、background-position 和 background-repeat 这三个。
-
background-size: cover—— 等比缩放填满容器，可能裁剪边缘（适合全屏 Banner） -
background-size: contain—— 等比缩放完整显示整张图，留白不可避免 -
background-position: center center—— 默认值，但显式写出更可控；也可用top right、20% 30%等微调 -
background-repeat: no-repeat—— 几乎必加，否则小图会平铺成“墙纸”效果
响应式背景图的坑：width/height 改变时图不重算
用 background-image 的元素在响应式中缩放时，图不会自动重新居中或重载——它只在初始渲染时计算一次 background-position 和 background-size。
- 移动端横竖屏切换、浏览器缩放、动态改宽高后，图可能偏移或拉伸失真
- 解决方法之一：用
background-attachment: fixed配合cover，但注意 safari 对 fixed 背景支持不稳定 - 更稳妥的做法：监听
resize事件，强制重设background-size（仅必要时，避免性能抖动） - 或者干脆放弃纯 CSS 方案，用
<img alt="html如何写一个好看的背景图片" >+object-fit: cover，语义清晰且重绘行为更可预测
透明度与叠加文字的可读性保障
背景图上直接放白字？大概率看不清。别依赖人眼调色，用 CSS 主动控制对比度和遮罩。
立即学习“前端免费学习笔记（深入）”；
- 用
background-color叠一层半透黑底：background: rgba(0, 0, 0, 0.4), url(...)（注意逗号分隔多层背景） - 或用伪元素模拟遮罩：
::before绝对定位盖在背景上，设background: rgba(0,0,0,0.3) - 文字本身加
text-shadow: 0 1px 2px rgba(0,0,0,0.5)提升边缘辨识度 - 别用
opacity整体降透明度——它会让文字和背景一起变淡，反而更难读
实际写的时候，最常被忽略的是元素自身有没有尺寸、有没有被其他样式静默覆盖，以及响应式变化后图没“跟上”。这些地方一卡，再好看的图也出不来。