通过 css 的 background-attachment: fixed 配合 background-size: cover 等属性，可让背景图在页面滚动时保持静止，而正文内容自由滚动，营造出沉浸式视差效果。
要实现「背景图像固定不动、内容区域独立滚动」的效果（即常说的 fixed background 或 parallax-ready background），关键在于正确设置 background-attachment 属性。你当前使用的线性渐变叠加图片的方式本身是可行的，但缺少让背景“锁定”的核心声明。
✅ 正确的 CSS 核心写法
body {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)),
url('wallpaper.jpg');
background-size: cover; /* 图片铺满视口，等比缩放 */
background-repeat: no-repeat; /* 防止平铺 */
background-attachment: fixed; /* ✨ 关键！使背景相对于视口固定 */
background-position: center; /* 居中对齐，提升视觉稳定性 */
margin: 0; /* 清除默认 body 边距，确保全屏生效 */
min-height: 100vh; /* 推荐：确保 body 至少占满视口高度 */
}⚠️ 注意：background-attachment: fixed 在移动端 Safari 中可能失效或表现异常（尤其 iOS? 完整 HTML + CSS 示例（推荐分离写法）
固定背景滚动内容 欢迎来到我的网站
这里的内容可以自由滚动，而背景图始终保持静止——这就是
background-attachment: fixed的魔力。? 补充说明与最佳实践
- height: 100% 不够，要用 min-height: 100vh：仅设 height: 100% 依赖父容器高度，而 html> 默认无高度；100vh 明确指定为视口高度，更可靠。
- 避免内联样式：示例中虽用了内联 style 演示，但实际开发中强烈建议将样式移至
- 移动端兼容替代方案（进阶）：
若需完美支持 iOS Safari，可用伪元素模拟固定背景：body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('wallpaper.jpg') center/cover no-repeat; z-index: -1; }并移除 body 上的背景相关声明，仅保留渐变层（可加在 body 或 ::after 上）。
✅ 总结
只需四步即可实现理想效果：
① 使用 background-image 设置图片（支持多层叠加，如渐变+图片）；
② 添加 background-attachment: fixed 锁定背景；
③ 配合 background-size: cover 和 background-position: center 保证美观适配；
④ 设置 min-height: 100vh 与 margin: 0，消除布局干扰。这样，你的页面就能像 Wix 模板那样，拥有稳如磐石的背景图和流畅滚动的前景内容了。
