html - 有没有办法在滚动视差时移动图片

Question

我在这里有一些用于视差滚动的代码，我想问一下在使用CSS滚动时是否可以以不同的速度（例如this demo中）移动图层？我尝试将transform: scale(1)更改为scale(1.1)，但这在页面顶部留下了这个奇怪的白线。难道我做错了什么？还有什么我应该考虑的吗？

html {
  font-family: sans-serif;
  color: black;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0%;
  margin: 0%;
  background-color: black;
}

body {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow: unset;
  padding: 0%;
  margin: 0%;
  background-image: black;
  /*padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  overflow-x: scroll;
  padding-bottom: 17px;
  box-sizing: content-box;
}

#layer1 {
  height: 100%;
  /* The image used */
  background-image: url('**PLACEHOLDER**');
  /* Full height */
  height: 800px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
}

#layer2 {
  /*border:2px solid black;
    border-radius: 5px;*/
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}

#layer3 {
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 110%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}

<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>

Answer 1

我找到了1个解决方案，但这并不是我想要的。我只是添加了一个标题栏，该标题栏被锁定在页面顶部，但是我只想要图像。