background-size: cover在移动端不铺满、裁切关键内容、横屏留白的根本原因是容器未撑开高度、html/body缺height:100%、页面漏viewport meta标签；必须同时满足三者才能生效。

background-size: cover 在移动端不铺满、裁切关键内容、横屏留白——根本不是写法错，而是三个底层条件没齐备：容器没撑开高度、html/body 缺 height: 100%、页面漏了 <meta name="viewport" content="width=device-width, initial-scale=1">。

为什么 background-size: cover 在手机上只显示一截？

因为背景图只作用于它绑定的元素盒模型范围。如果 body 高度只有 20px（比如内容为空），再设 cover 也撑不开。

• html 和 body 必须同时设 height: 100% + margin: 0 + padding: 0，否则高度塌陷
• 移动端 Safari 对 100vh 渲染不稳定（地址栏显隐会动态改视口高度），优先用 min-height: 100dvh（iOS 16+ 支持）
• 漏掉 <meta name="viewport"> 时，浏览器按桌面宽度（如 980px）渲染，cover 实际作用在“伪宽屏”上，裁剪逻辑全乱

如何避免人脸/按钮被 background-size: cover 裁掉？

cover 的行为是确定的：等比缩放 → 填满容器 → 居中裁剪。它不识别构图，只认宽高比差值。裁哪边，取决于设备屏幕比（如 iPhone 14 Pro 是 19.5:9）和图片比（如 16:9）的偏差。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 显式写 background-position: center center（别只写 center），规避旧安卓 WebView 解析偏差
• 关键内容（人像、logo）尽量放在图片中心 60% 区域内，这是最稳妥的“安全区”
• 小屏竖屏易裁顶部，可用媒体查询微调：@media (max-width: 768px) { background-position: center 10%; }
• 避免用超宽图（如 3840×1080）做全屏背景——竖屏下会疯狂裁顶底

background-attachment: fixed 在手机上为啥不动？

不是你写错了，是 iOS Safari 早废弃、Android Chrome 84+ 及微信/QQ WebView 主动禁用该声明，静默降级为 scroll。DevTools 显示“生效”，但实际滚动照常。

• 别加 -webkit-background-attachment: fixed 或 transform: translateZ(0)，基本无效，还可能引入新层叠上下文
• 真要固定背景，用 position: fixed + 独立 <div class="bg-fixed"> 模拟，<code>z-index: -1 是必须的
• 若不能加额外 DOM，改用 position: sticky，但要求父容器有明确高度且无 overflow: hidden

怎么让大图在不同 DPR 设备上不模糊？

CSS 背景图不支持 srcset，但 image-set() 能按设备像素比（DPR）自动选图，不发多余请求。

• 写法：background-image: url(img-fallback.jpg), image-set(url(img.jpg) 1x, url(img@2x.jpg) 2x);
• 必须带 fallback（逗号前的 url()），否则旧浏览器无图可显
• 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+；不支持按视口宽度切换，这类需求只能靠媒体查询多写几遍 background-image

最易被忽略的是 100dvh 和 viewport meta 的组合——它们不报错、不警告，但缺一不可。真机测试时，哪怕 CSS 全对，只要这两项少一个，背景图就永远“差一口气”。