CSS让背景图固定不动的技巧

使用场景：全屏轮播头图、视差滚动首屏、品牌展示页顶部大图。

• 给背景容器设 position: sticky + top: 0，再配合 z-index: -1 压到内容下层
• 必须确保父容器没有 overflow: hidden，否则 sticky 会被截断
• 背景图用 background-size: cover + background-position: center 防止拉伸错位

 

正文
.bg-fixed {
position: sticky;
top: 0;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}
.content { position: relative; }

兼容性更强的 JS 方案：监听 scroll 手动更新 background-position

当需要精确控制或做视差效果时，CSS 已经不够用了，得靠 JS 动态算偏移量。

容易踩的坑：scroll 事件高频触发导致卡顿，尤其在低端机上。

• 务必用 requestAnimationFrame 节流，别直接绑 addEventListener('scroll', ...)
• 读取 window.scrollY 后，计算出反向偏移值，赋给 background-position-y
• 注意 Safari 对 background-position 的 CSS 变量支持较晚，建议用 element.style.backgroundPosition

示例关键逻辑：

let ticking = false;
function updateBg() {
  const y = window.scrollY * 0.5; // 视差系数
  document.body.style.backgroundPosition = `center ${y}px`;
  ticking = false;
}
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(updateBg);
    ticking = true;
  }
});

background-attachment: local 是什么，能用吗

background-attachment: local 的作用是让背景图随元素内容滚动，而不是随容器滚动——但它和“固定背景”完全相反，别被名字误导。

使用场景极少：只适用于内部有大量可滚动内容（如 textarea 或带 overflow: auto 的 div），且你希望背景图贴着文字一起动。

• 它不会让背景图停在视口里，反而更“粘”内容，和需求背道而驰
• IE 完全不支持，Firefox 支持但行为不一致，Chrome 表现最稳定
• 和 fixed 混用会以最后一个有效值为准，local 不会帮你修复移动端失效问题

真正跨端可靠的固定背景，从来不是靠一个 CSS 声明搞定的；要么用 sticky 层叠结构兜底，要么用节流后的 scroll 计算。最麻烦的地方在于：你得同时照顾 Safari 的限制、安卓 WebView 的策略、以及用户手指滑动时的帧率表现——这些细节不显眼，但一漏就整个首屏失焦。

本篇关于《CSS让背景图固定不动的技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！