background-size: cover 在小屏上裁切关键内容，因其等比缩放填满容器却不保证主体居中可见；需配合 background-position（如 center center 或 top center）手动控制可视区域，并通过媒体查询分段设置缩放行为，同时确保源图分辨率足够。
background-size: cover 为什么在小屏上切掉了关键内容
因为
的逻辑是“等比缩放填满容器”，不保证主体居中可见——尤其当背景图宽高比和容器差异大时，顶部/底部常被裁掉。常见于手机端 banner 图文字被砍掉一半。
优先用
锁定视觉中心，再配
若图中关键信息在顶部（比如 logo + 标题），改用
，但需配合足够高的容器或内边距留白
不要依赖
自动适配；先确认设计稿里“安全区域”在哪，再手动调
如何让背景图在不同断点下缩放行为不同
响应式背景缩放不是靠一个属性搞定的，得靠媒体查询分段控制
和
。
桌面端用
填满全宽，移动端可改用
确保整图可见（适合信息图类背景）
中屏（如 iPad）常用
：宽度拉满，高度按比例自适应，避免拉伸变形
注意
的值必须成对出现（如
），单值如
等价于
，不是“只设宽度”
background-size 配合 background-attachment: fixed 在移动端失效
加了
的背景在 iOS Safari 和部分安卓浏览器里会直接退化为
，且
缩放可能错位。这不是 bug，是性能策略：视差滚动开销大，系统主动降级。
真要实现视差效果，用
+ 滚动监听，而不是
如果只是想让背景不动，检查是否误加了
—— 大多数响应式头部根本不需要它
在支持它的浏览器里更可控，但兼容性弱，慎用
图片本身尺寸不够大，响应式缩放后变模糊怎么办
缩放本质是拉伸像素，
在 2x 屏或大屏上会放大原图，分辨率不足就糊。这不是 CSS 能解决的，得从资源源头控制。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
提供至少 2 倍于最大容器宽度的图（比如最大容器宽 1440px，图至少 2880px 宽）
用
单独换高清图，或直接上
（注意 Safari 支持度）
SVG 背景无损缩放，但仅限图形类；照片类别无选择，只能换图
最常被忽略的是：设计师给的“一张图适配所有设备”根本不可行。缩放逻辑再准，源图分辨率不够，一切白搭。
coverbackground-position: center centercoverbackground-position: top centercoverbackground-positionbackground-sizebackground-positioncovercontain100% autobackground-size100% 100%100%100% 100%fixedscrollcovertransform: translateY()background-attachmentfixedbackground-attachment: localbackground-size: cover@media (-webkit-min-device-pixel-ratio: 2)image-set()