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