通过 css 的 `background-attachment: fixed` 配合 `background-size: cover` 和 `background-repeat: no-repeat`，可让背景图随视口固定，内容滚动时图像保持静止。
要实现「背景图始终静止、页面内容自由滚动」的经典视差效果（常见于高端着陆页或作品集模板），核心在于正确设置
元素的背景行为。你当前使用的 linear-gradient 叠加背景是可行的，但缺少关键属性——background-attachment。✅ 正确的 CSS 方案
只需在 body 样式中添加以下声明：
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 边距，避免空白 */
height: 100vh; /* 推荐使用 vh 而非 %，确保初始高度准确 */
}? 注意：background-attachment: fixed 在移动端部分浏览器（如早期 iOS Safari）中可能被忽略或降级为 scroll。若需强兼容，建议搭配 JavaScript 模拟（如 position: sticky 容器 + z-index 分层），但绝大多数现代桌面/Android 浏览器均原生支持。
? 完整 HTML 示例（含语义化优化）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定背景滚动内容</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-image:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('wallpaper.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
padding: 2rem;
}
main {
max-width: 800px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.65);
padding: 2rem;
border-radius: 8px;
backdrop-filter: blur(4px);
}
</style>
</head>
<body>
<main>
<h1>欢迎来到我的网站</h1>
<p>向下滚动查看效果 —— 背景图将保持完全静止，而文字与容器正常滚动。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/761" title="Pliny"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6db26747b8162.png" alt="Pliny" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/761" title="Pliny">Pliny</a>
<p>创建、分享和重新组合AI应用程序</p>
</div>
<a href="/ai/761" title="Pliny" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!-- 此处插入大量内容以触发滚动 -->
<p>...</p>
</main>
</body>
</html>⚠️ 常见问题与建议
- 图片加载失败？ → 使用 background-image: url(...), url() 中路径需确保可访问；建议添加 background-color: #222 作为降级色。
- 文字看不清？ → 如示例所示，叠加半透明渐变（linear-gradient）或使用 backdrop-filter + 半透明白色文字，显著提升可读性。
- 高度异常？ → 避免仅设 height: 100%，改用 min-height: 100vh，兼顾内容高度超出视口的情况。
- SEO 与语义？ → 不推荐将背景图写在内联 style 中（如答案示例），应统一置于
掌握 background-attachment: fixed 这一特性，即可轻松复刻 Wix、Webflow 等平台中高级的沉浸式背景体验——简洁、高效、无需 JS。
