-1

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

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：位置是否固定，固定背景颜色（深蓝色）和网址图像，使其在滚动时不会移动？

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

问题3：不需要在代码中添加(will-change:transform;)。

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

4

1 回答 1

0

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

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

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

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

问题3：不需要在代码中添加(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>

于 2022-01-12T14:50:57.593 回答