1

我正在尝试实现视差效果，它在我的较小显示器上运行良好，但是当我将选项卡拖到较大的主显示器上看到它时，它立即不起作用。图像不会保持固定，而是与站点的其余部分一起滚动。当我把它拖回来时，它又开始工作了。我很困惑，这是 chrome 的同一个实例，所以为什么会发生这种情况。有没有办法来解决这个问题？我已经在 Edge 中尝试过了，它在那里工作得很好。

另外，我正在使用 Angular 6。

.container {
  margin:0;
  padding:0;
}
#box1 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
  background-attachment: fixed;
}
#box2 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
}
#box3 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
}
h1 {
  font-family: arial black;
  font-size: 50px;
  color: white;
  margin: 0px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
<div class="container">


  <div id="box1">
    <h1>Hello</h1>
  </div>
  <div id="box2">
    <h1>Hello</h1>
  </div>
  <div id="box3">
    <h1>Hello</h1>
  </div>
</div>

4

0 回答 0