最稳妥方案是用固定定位伪元素或独立DOM层模拟背景固定：body::before设fixed+cover+pointer-events:none，或添加#bg-layer元素并置底；禁用transform/filter等触发局部坐标系的属性。
用 background-attachment: fixed 是最直接的方式，但实际中容易失效——尤其在 iOS Safari、启用了硬件加速的 Chrome，或父容器加了 transform/filter 的场景下。关键不是“加不加”，而是“怎么加才稳”。
基础写法（适合桌面端简单场景）
把下面样式加到 body 上即可：
-
必须清空默认边距：
margin: 0 -
高度要撑满视口：
min-height: 100vh（别用height: 100%，它依赖父元素高度） -
图片铺满且居中：
background-size: cover; background-position: center center; background-repeat: no-repeat -
核心固定声明：
background-attachment: fixed
移动端和兼容性问题怎么破
iOS Safari 完全不支持 background-attachment: fixed，安卓部分 WebView 也会静默降级为滚动行为。这时推荐用伪元素模拟：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
body::before设置position: fixed和完整背景属性 - 加上
z-index: -1确保内容在它上面 - 务必加
pointer-events: none，否则会拦截点击事件 - 避免在
body或祖先上使用transform、filter、will-change，这些会破坏 fixed 行为
更可控的替代方案：独立背景层
如果项目对稳定性要求高（比如上线页面），建议放弃 background-attachment，改用一个真实 DOM 元素：
立即学习“前端免费学习笔记（深入）”；
- 插入一个
<div id="bg-layer"></div>，放在<body>最开头 - 设置
position: fixed; top: 0; left: 0; width: 100%; height: 100% - 背景图用
background属性设置，并配cover和center - 设
z-index: -1，不要加 padding/margin，只负责铺底
常见踩坑提醒
即使代码看起来没错，也可能因以下原因失效：
-
body外层有<div style="transform: translateZ(0)">—— 这是硬件加速常用写法，但它会创建局部坐标系，让 fixed 背景相对该 div 固定，而非视口 - 用了
filter: blur(1px)的导航栏或头部，同样触发新层叠上下文 - 背景图尺寸太小，
cover会导致严重拉伸或裁剪，建议用宽高比接近 16:9 或 4:3 的图 - 没设
background-repeat: no-repeat，小图会平铺，失去“固定”观感
