background-attachment: fixed 在移动端基本不可靠，因 ios safari 忽略、安卓 webview 渲染错位、软键盘弹出时背景偏移，且父元素含 transform/filter/will-change 时自动降级为 scroll；推荐用 position: fixed + z-index: -1 的 div 模拟，配合 100dvh 和 overflow-x: hidden 等细节处理。
直接用 background-attachment: fixed 在 body 上，90% 的情况会在 iOS Safari 或安卓 WebView 中失效——不是代码写错了，而是浏览器根本没渲染它。
为什么 background-attachment: fixed 在移动端基本不可靠
这个属性在桌面 Chrome/Firefox 里表现尚可，但一到移动端就出问题：iOS Safari 会忽略它，部分安卓 WebView 渲染错位，软键盘弹出时背景被顶出视口。更隐蔽的是，只要父元素有 transform、filter 或 will-change，fixed 就自动退化为 scroll，连 warning 都不报。
- 它只对「可滚动的元素」生效，而
body在很多移动端浏览器里不算标准滚动容器 -
background-size: cover和background-position仍起作用，但fixed行为被静默降级 - 无法通过
@supports (background-attachment: fixed)准确检测，因为浏览器可能声称支持却实际不执行
用 position: fixed + z-index: -1 模拟固定背景图
这是目前兼容性最稳、行为最可控的方案，本质是用一个脱离文档流的 div 覆盖整个视口，再把图片塞进去。
- 必须把
<div class="bg-fixed"></div>放在最外层，不能嵌套在任何section或main里 - CSS 中
width: 100vw和height: 100vh是底线，不能只写100%—— 后者依赖父级高度，而body高度不可靠 -
z-index: -1不可省略，否则会拦截所有点击、滑动和文本选中；旧版安卓对负 z-index 渲染异常极少，但若真遇到，可改用z-index: 0+pointer-events: none - 如果页面有横向滚动（比如宽表格），记得同步给
.bg-fixed加overflow-x: hidden，否则横滑时右侧会露白
用 100dvh 替代 100vh 防止移动端跳动
地址栏显示/隐藏会动态改变视口高度，100vh 在 Safari/Chrome 移动端会卡在初始值，导致背景图底部被裁或留白。用 dvh 单位能实时响应变化。
-
height: 100dvh是现代标准，但需确认目标环境支持（Chrome 104+、Safari 16.4+、Firefox 110+） - 不支持
dvh的老浏览器可 fallback 到min-height: 100vh，配合 JS 动态修正高度（如监听resize事件重设style.height） - 别用
object-fit: cover在img上替代背景图——它无法响应视口缩放，且position: fixed的img在高 DPR 屏幕易模糊
背景图绑定到 html 元素的注意事项
如果坚持用原生 background，唯一靠谱的位置是 html，不是 body。但仍有硬伤要手动补。
- 必须重置
html, body { margin: 0; padding: 0; }，否则默认边距会让背景露出白边 -
html需设min-height: 100dvh，不能只靠height: 100%—— 后者在某些嵌套场景下会塌陷 -
background-attachment: fixed依然建议加上，哪怕只是作为渐进增强；同时加-webkit-background-attachment: fixed提升 Safari 兼容率 - 真正难处理的是内容溢出：背景铺满了，但长文案仍会触发滚动条。这时禁用
overflow是错的，应控制内容区域高度或用max-height+overflow-y: auto分离滚动逻辑
最常被忽略的一点：固定背景图和是否允许页面滚动，是两个独立问题。前者靠定位或 attachment 控制视觉锚点，后者由内容高度和容器 overflow 决定——混在一起硬塞 overflow: hidden，只会让表单输入框获焦后消失在屏幕外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
