视差滚动效果有效，但我的图像不会固定到两侧和页面顶部

Question

我开始使用 HTML 和 CSS，我正在尝试制作一个带有视差滚动的项目。我从中获取了现有代码以获得视差效果 here.

视差效果有效，但图像与页面末尾之间存在障碍。

我的 HTML 和 CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html {
background-color: rgb(228, 210, 210);
}

.parallax {
  /* The image used */
  background-image: url("background.jpg");
  min-height: 850px; 


  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  width:100%;
  text-align: center;
  padding-top: 95px;
  color: rgb(255, 255, 255);
  font-size: 2em;
}

#title {
  text-align: center;
}

.div1 {
  height:500px; 
  background-color:rgb(21, 106, 112); 
  color: rgb(175, 174, 174);
  font-size:32px;
  border-radius: 25px; 
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

.div2 {
  height:500px; 
  background-color:rgb(60, 219, 153); 
  color: rgb(92, 91, 91);
  font-size:32px;
  border-radius: 25px; 
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

ul, ul > h1 > li, #skills {
  color: rgb(102, 101, 101);
  list-style-type: square;
}

#sideprojects {
  text-align: center;
}

#nav-base {
  height: 50px;
  width: 100%;
  background-color: rgb(29, 28, 28);
}

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css\style.css" rel="stylesheet" />
  </head>
      <body>
      
      <div class="parallax">
          <h1>name</h1>
      </div>

      <div id="nav-base">

      </div>
      
      <div class="div1">
          <h1 id="title">Random Title</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur volutpat fringilla. Morbi eget hendrerit augue. 
          Vestibulum ipsum risus, convallis sed sagittis vitae, tincidunt eget sem. Sed feugiat luctus diam non sollicitudin. 
          Nulla eu lectus bibendum, tempus est porttitor, vulputate metus. Vestibulum nec diam pellentesque, aliquam eros eget, semper magna. Suspendisse aliquam, dui nec accumsan dapibus, mi neque sollicitudin eros, ac fringilla dolor nisi vitae elit. 
          Quisque et vehicula purus. Nulla vestibulum sem nibh, vitae consectetur tortor convallis posuere. Vestibulum nulla libero, tincidunt sit amet suscipit non, rhoncus ut ligula. 
          Morbi tortor mauris, bibendum sit amet lorem vitae, convallis dignissim nisi. In pharetra et odio eu tristique. Nam ullamcorper pharetra nibh, at tincidunt diam.
      </div>

      <div class="div2">
          <h2 id="sideprojects">Side Projects</h2>
          <ul id="skills">
              <h2>Skills</h2>
              <li>Java</li>
              <li>HTML</li>
              <li>CSS</li>
              <li>Wordpress</li>
          </ul>
      </div>
      
      </body>  
</html>

Answer 1

这是因为浏览器为 body 标签提供的默认边距 chrome 是 8px（它可能因浏览器而异）。这可以在你的 css 中覆盖，如果你想用这样的东西：

HTML, body {
margin: 0px;
}

视差滚动效果有效，但我的图像不会固定到两侧和页面顶部

Parallax scrolling effect works but my image won't pin to both sides and to top of page

html

css

margins

padding