background-size: cover 在移动端易裁切重要内容，因只保证覆盖不保证居中可见；应配合 background-position（如50% 20%）控制裁剪区域，避免像素值，慎用cover与contain混写，需媒体查询分条件处理，并排查路径、容器高度及属性冲突等问题。
background-size: cover 在移动端经常切掉重要内容
这是因为 cover 只保证“完全覆盖容器”，不保证“内容居中可见”。尤其在 iPhone 竖屏 + 高宽比差异大的图时，顶部或底部常被裁掉一截，而设计师给的图又往往把关键信息放在边缘。
解决思路不是换属性，而是配合 background-position 主动控制裁剪区域：
- 默认
background-position: 50% 50%（居中），但很多图的关键信息偏上，比如人脸、Logo、标题行 —— 改成background-position: 50% 20%能多保留上方内容 - 如果图是横幅式构图（如风景、产品平铺），用
background-position: center top比居中更稳妥 - 避免写死像素值（如
10px 20px），响应式场景下会失效；百分比或关键词更可靠
background-size: cover 和 contain 混用导致布局错乱
有人想“先 cover 再 fallback 到 contain”，于是写成 background-size: cover, contain —— 这不会生效。CSS 不支持为同一背景图指定多个 background-size 值，浏览器只取第一个。
真要兼顾覆盖与完整显示，得靠媒体查询分条件：
立即学习“前端免费学习笔记（深入）”；
- 小屏（如手机）优先保覆盖：
@media (max-width: 768px) { .hero { background-size: cover; } } - 大屏（如桌面）可考虑
contain或100% auto，但需确认容器高度是否固定 —— 否则contain可能留白严重 - 注意：iOS Safari 对
background-size: contain在 flex 容器中的渲染有延迟，建议加transform: translateZ(0)触发硬件加速
background-image 加了 cover 却没生效，检查这三点
常见原因不是语法错，而是上下文干扰：
-
background-image路径出错或 404，浏览器静默失败，cover就没作用对象 —— 打开 DevTools 的 Network 标签页看图片是否加载成功 - 父容器没设高度，比如
div里只有文字，又没设height或min-height，背景图区域实际是 0 高 ——cover再努力也无图可盖 - 用了
background-clip: text或background-attachment: fixed，某些安卓 WebView 下会忽略background-size—— 临时去掉这两个属性验证是否冲突
React/Vue 中动态设置 background-size: cover 容易漏掉单位或引号
JSX 或模板里拼背景图时，很容易写成 style={{ backgroundImage: `url(${src})`, backgroundSize: 'cover' }} —— 看似没问题，但若 src 是相对路径且组件被异步加载，可能触发跨域或 404；更隐蔽的是，部分构建工具（如 Vite + CSS in JS）对 backgroundSize 属性名大小写敏感，必须写 backgroundSize，不能写 background-size。
安全写法：
- 确保
src是绝对路径或已通过new URL('./img.jpg', import.meta.url)处理 - 显式声明
backgroundRepeat: 'no-repeat'，否则某些旧 Android 浏览器会默认平铺，覆盖掉cover效果 - 如果用 Tailwind，别直接写
bg-cover—— 它只设background-size: cover，不配background-position，得额外加bg-center或bg-top
真正难的不是写对 cover，而是预判它会在哪台设备、哪个视口宽度、哪种图片比例下悄悄切掉你最不想丢的那一块像素。多在真机上用不同图片试两轮，比查十遍文档管用。
