使用background-attachment:fixed时背景图偏移出现底部空白是什么原因

问题原因 #

你遇到的背景图偏移、底部出现空白、background-size: cover按窗口而非容器拉伸的问题，核心是background-attachment: fixed的固有特性导致的：
设置该属性后，背景图的定位、尺寸计算的参考对象会从所属DOM容器切换为整个浏览器视口（窗口），而非当前的.cover容器：

• 你设置background-size: 100%时，这个比例是相对于视口宽度，不是.cover容器的宽度
• 背景图的默认起始定位点是视口左上角，若.cover容器没有紧贴视口顶部，背景图的上半部分会被容器上方的内容遮挡，容器可见区域的背景就会从图片中间位置开始展示，底部自然露出你设置的渐变灰色背景，也就是你看到的空白区域
• 同理background-size: cover也会基于视口尺寸计算缩放比例，自然不会按容器尺寸适配。

修复方案 #

要保留background-attachment: fixed的滚动固定效果，同时让背景图刚好适配.cover容器的位置和尺寸，调整如下：

CSS调整 #

.cover {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 移除原固定的background-size配置，改为JS动态设置 */
}

JS调整 #

let resizeCover = size => {
  const [w, h] = size;
  const coverWidth = $cover.width();
  const ratio = coverWidth / w;
  const coverHeight = h * ratio;
  $cover.height(coverHeight);
  // 动态设置背景图尺寸匹配容器
  $cover.css('background-size', `${coverWidth}px ${coverHeight}px`);
  updateBgPosition();
}

// 滚动/尺寸变化时更新背景定位，保证背景和容器对齐
const updateBgPosition = () => {
  // 计算容器在当前视口中的Y轴偏移
  const coverViewportY = $cover.offset().top - window.scrollY;
  $cover.css('background-position', `0 ${coverViewportY}px`);
}

const $cover = $('.cover');
const cover = new Image();
const url = '你的背景图地址';
cover.src = url;

let imgSize = null;
cover.onload = () => {
  imgSize = [cover.width, cover.height];
  const bg = 'linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("' + url + '")';
  $cover.css('background-image', bg);
  resizeCover(imgSize);
};

// 监听窗口尺寸变化和滚动事件，实时适配
window.addEventListener('resize', () => {
  if (imgSize) resizeCover(imgSize);
});
window.addEventListener('scroll', updateBgPosition);

内容的提问来源于stack exchange，提问作者dabadaba