关于使用背景附件的移动友好替代方案的问题：已修复，改为使用伪元素

Question

我一直在分析这段代码，它是使用 background-attachment: fixed 的替代方法，但有一些我似乎无法弄清楚的问题。我试图在网上找到答案但没有成功。有人可以帮忙吗？代码是：

body::before {
  content:”;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(—color-darkblue);
  background-image: linear-gradient(rgba(58, 58, 158,0.8), rgba((136, 136, 206,   0.7)),url(#);background-size: cover;
  background-repeat: no-repeat;background-position: center;
}

问题1：固定位置，固定背景颜色（深蓝色）和url图片，滚动时不移动吗？

问题 2：哪个属性或属性修改背景颜色和/或背景图像？例如 top:0 和 left: 0 是否只修改背景颜色？ background -size 是否仅修改 url(jpeg)？

问题3：代码中是否需要加上(will-change: transform;)

非常感谢。在过去的 3 天里，我一直在努力解决这个问题。

Answer 1

问题1：位置是否固定，固定背景颜色（深蓝色）和url图像，使其在滚动时不移动

是的——基本上就是固定的意思。

问题 2：哪个属性或属性修改背景颜色和/或背景图像？例如 top:0 和 left: 0 是否只修改背景颜色？ background -size 是否仅修改 url(jpeg)？

top和left不（直接）修改背景。他们所做的是定位整个伪元素，因此，他们间接地改变了背景的位置，因为他们已经改变了包括其背景在内的整个伪元素的位置。背景大小会影响图像。

问题三：代码中是否需要加上(will-change:transform;)

我不明白为什么这是必要的，因为没有任何即将发生的事情正在被改变。是的，用户可能会滚动，但系统已经获得了保持背景（伪元素）固定所需的信息。

事实上有几种滥用 will-change 的可能性 - 它会使事情变得更糟，所以我会避免它，除非你真的看到性能问题。有关更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/will-change 对此进行深入讨论。

这是一个片段，显示向下滚动时背景保持不变。

body {
  width: 100vw;
  --color-darkblue: darkblue;
  color: white;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://picsum.photos/id/1015/300/300);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<body>
  <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</body>

关于使用背景附件的移动友好替代方案的问题：已修复，改为使用伪元素

Question about a mobile friendly alternative to using background-attachment: fixed, using pseudo element instead

html

css

will-change