滚动时如何让带SVG遮罩的背景图扩展并铺满屏幕？

你之前的代码问题出在修改元素宽高导致滚动计算混乱，而且没同步调整遮罩尺寸。下面是修复后的方案：

修改思路 #

• 保持元素尺寸为100vw/100vh，避免元素大小变化干扰滚动百分比计算
• 滚动时动态调整遮罩（mask-size）的尺寸，从初始的小范围逐步放大到覆盖整个视口
• 背景图片设为cover，确保始终铺满元素，配合遮罩的放大实现"图片扩展铺满"的效果

完整代码 #

HTML #

<div class="el"></div>

CSS #

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #8f7a66;
  /* 给页面设置足够滚动空间 */
  min-height: 200vh;
}

.el {
  position: fixed; /* 固定在视口，避免滚动时元素移位 */
  width: 100vw;
  height: 100vh;

  background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: cover; /* 图片始终铺满元素 */
  background-position: center;
  background-repeat: no-repeat;

  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
  mask-size: 50vmin; /* 初始遮罩尺寸 */
  mask-repeat: no-repeat;
  mask-position: center;
}

JavaScript #

window.addEventListener('scroll', function() {
  const el = document.querySelector('.el');
  // 计算滚动进度：0（未滚动）到1（滚动到底）
  const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  // 遮罩从50vmin放大到150vmin（足够覆盖整个视口）
  const maskSize = `${50 + scrollPercent * 100}vmin`;
  el.style.maskSize = maskSize;
});

关键调整说明 #

1. 给body设置min-height: 200vh，确保页面有可滚动的空间
2. 将.el设为position: fixed，固定在视口内，滚动时不会随页面移动
3. 背景图片改用background-size: cover，保证图片始终铺满元素区域
4. JS中不再修改元素宽高，而是直接调整mask-size：滚动进度从0到1时，遮罩从50vmin放大到150vmin，完全覆盖视口后，图片就铺满屏幕了

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