本文详解如何仅用 CSS 实现封面区域的视差滚动效果：将图片设为容器背景并启用 background-attachment: fixed，使后续内容滚动时背景图像保持静止，形成视觉深度感。
本文详解如何仅用 CSS 实现封面区域的视差滚动效果：将图片设为容器背景并启用 `background-attachment: fixed`，使后续内容滚动时背景图像保持静止，形成视觉深度感。
在现代网页设计中，视差滚动（Parallax Scrolling）是一种提升视觉层次与沉浸感的常用技巧。许多开发者误以为给 <img> 标签添加 background-attachment: fixed 即可实现效果，但需明确：该属性仅对 CSS 背景图像（background-image）生效，对 <img> 元素本身无效。因此，实现纯 CSS 视差的核心在于——移除独立 <img> 标签，改用 background-image + background-attachment: fixed 组合。
✅ 正确实现步骤
- 移除冗余 <img> 元素：原结构中 <img class="img"> 与 .cover 并列，既增加 DOM 复杂度，又无法触发视差；
- 将图片 URL 移至 .cover 的 background 声明中，并显式设置 background-attachment: fixed；
- 确保 .cover 容器具有明确高度或内容撑开（否则背景可能不可见），同时避免 position: absolute 等导致脱离文档流的干扰；
- 为后续滚动内容（如 #main）提供足够高度或内容量，以产生可感知的滚动位移。
? 关键 CSS 代码示例
.cover {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* ? 核心：背景图固定 + 指定图片 URL */
background-image: url('https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');
background-attachment: fixed; /* ✅ 视差生效的关键 */
}
/* 可选：增强兼容性与性能 */
@media (prefers-reduced-motion: reduce) {
.cover {
background-attachment: scroll; /* 为无障碍用户降级体验 */
}
}? HTML 结构精简版
<div class="wrapper">
<div class="cover">
<div class="cover_wrapper">
<h1 class="title font">Title</h1>
<p class="font" style="padding-top: 140px; margin: 0;">This is my Website</p>
</div>
</div>
</div>
<div id="main" role="main">
<!-- 此处内容需足够长，才能观察到视差效果 -->
<p>something something</p>
<p style="height: 150vh; background: #f5f5f5;">Scroll down to see parallax in action.</p>
</div>⚠️ 注意事项与最佳实践
-
性能提示：background-attachment: fixed 在部分移动端浏览器（尤其是旧版 Safari）中可能触发重绘性能问题。建议在关键项目中配合 @supports 检测：
@supports (background-attachment: fixed) { .cover { background-attachment: fixed; } } - 响应式适配：background-attachment: fixed 在 iOS Safari 中默认被禁用（出于性能考虑）。若需兼容，可使用 transform: translateZ(0) 强制硬件加速，或接受其在 iOS 上回退为 scroll 行为。
- 语义化考量：封面图若含重要信息（如品牌标识、关键文案），应确保其作为 CSS 背景时仍满足可访问性要求（例如通过 aria-label 或文本替代说明补充）。
- 动画协调：原代码中 .cover 含 animation: intro，注意 background-attachment 与 CSS 动画共存时无冲突，但需避免对 background-position 进行动画（可能破坏视差稳定性）。
✅ 总结
纯 CSS 视差效果的本质是“背景静止，内容滚动”。只需三步：
① 删除 <img>，改用 background-image；
② 添加 background-attachment: fixed；
③ 确保滚动容器有足够内容高度。
无需 JavaScript、不增加加载负担、语义清晰、兼容主流浏览器（含降级策略），是构建高性能首屏体验的理想方案。
