Question

我正在学习如何构建一个视差网站，而且我遇到了背景图像和内容之间的间距问题。我将显示更改为内联块，并将其宽度设置为100％。这是实现我想要的正确方法吗？

body, html{
  height: 100%;
}

.parallax{
  background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/v1480649066/hero4_u3xhhu.jpg");
  height: 100%;
  
  /*Parallax Scrolling Effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:
}

.content-1{
  height: 500px;
  background-color: blue;
  font-size: 20px;
  display: inline-block;
  width:100%;
}

.content-2{
  height: 500px;
  background-color: red;
  font-size: 20px;
  display: inline-block;
  width: 100%;
}

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Parallax Test</title>
  </head>
  <body>
    <div class="parallax"></div>
    
    <div class="content-1">
      <h2>This is background #1</h2>
      <p>About content could go here</p>
    </div>
    
    <div class="parallax"></div>
    
    <div class="content-2">
      <h2>This is background #2</h2>
      <p>Portfolio content could go here</p>
    </div>
    
    <div class="parallax"></div>
  </body>
  </html>

视差间距问题

0 个答案: