Firefox中，被裁剪为文本形状的固定背景图能否随页面滚动？

这是Firefox的Bug吗？ #

没错，这是Firefox的已知兼容性问题。当background-clip: text和background-attachment: fixed组合使用时，Firefox会把裁剪后的背景固定在视口，导致文本视觉上不随页面滚动；而Chrome、Edge等浏览器则会让文本正常滚动，背景相对视口固定，两者表现不一致。

可行的解决办法 #

1. 用伪元素模拟固定背景的文本裁剪 #

通过父元素的伪元素承载固定背景，再用混合模式实现类似文本裁剪的效果，兼容性更好：

h1 {
  color: #000; /* 根据背景调整颜色，保证混合效果 */
  position: relative;
}

h1::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  background-size: cover;
  z-index: -1;
  mix-blend-mode: screen; /* 混合模式可根据实际效果调整，比如multiply */
  pointer-events: none; /* 避免干扰元素交互 */
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

2. 用JavaScript动态调整背景位置 #

如果需要保留原生background-clip:text的效果，可以去掉background-attachment:fixed，通过监听滚动事件动态修改背景位置，模拟固定效果：

h1 {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent;
  background-position: 0 0;
  background-size: cover;
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

const heading = document.querySelector('h1');
window.addEventListener('scroll', () => {
  heading.style.backgroundPosition = `0 ${-window.scrollY}px`;
});

3. 场景受限的方案：用position:sticky替代 #

如果文本不需要完全自由滚动，而是需要在滚动到特定位置时固定，可以尝试position:sticky，不过这种方法仅适用于特定布局需求：

h1 {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent;
  position: sticky;
  top: 0;
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

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