Question

我一直试图用css创建视差效果。但是，虽然视差效果确实有效，但浏览器似乎在页面底部添加了不必要的空白。我认为这是因为我正在沿z轴将对象移离我，然后将其放大。但是我不知道如何摆脱所有正在生成的空白。 css：

html{
  height:100%;
  overflow:hidden;
}
body{
  color:#000;
  margin:0;
  padding:0;
  perspective: 1px;
  height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  font-family:"Luna";
}
.parallax{
  box-sizing: border-box;
  min-height:100vh;
  padding:30vw 0 5vw 0;
  position:relative;
  width:100vw;
  transform-style: preserve-3d;
}
.parallax h1{
  margin:0;
  padding:0 0 1vw 0;
}
.parallax p{
  margin:0;
}
.parallax, .parallax::before{
  background-size:cover;
}
.pic{
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  background-image: url(../images/bckground.jpg);
  transform-origin:center;
  transform: translateZ(-1px) scale(2);
  z-index:-1;
  height:100vh;
  display:block;
}
.parallax *{
  font-weight:bold;
  letter-spacing: 0.2em;
  text-align:center;
  padding:1em 0;
}

<body>
  <header class = "parallax">
    <div class = "pic"></div>
    <div id = "textWrapper">
      <h1>This is a header</h1>
      <p>Parallax scrolling no javascript</p>
    </div>
  </header>
</body>

很抱歉，如果对此有一个明显的答案，但我只是从编程开始，在网上找不到任何答案

CSS 3D生成的空白？

0 个答案: