html - 无论如何要先固定背景图像然后滚动？

Question

所以我基本上是想在我的网页上获得带有多个背景图像的滚动视差效果。我将发布一个网站链接，其中包含我正在谈论的内容的完美示例(查看网页上的前两个背景图片)。这是该链接:https://www.wix.com/website-template/view/html/1885?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2F1&bookName=&galleryDocIndex=0&category=portfolio-cv然而，我的网页的问题是，一旦您向下滚动到某个点，第一个背景图像就会被截断(应该如此)，但第二个背景图像滚动得太快，并在显示背景的地方留下这个“空白”。我将提供一个 jsfiddle 链接，以便您了解我在说什么。出于某种原因，您可能必须在 jsfiddle 上展开视口(viewport)才能看到第一个背景图像。提前致谢。

CSS:

    body {
  padding: 0;
  margin: 0;
  background-color: rgb(114, 129, 139);
  overflow-x: hidden;
  animation: fadein 1s;
}
a {
  text-decoration: none;
  font-family: Tahoma, Geneva, sans-serif;
}
h1 {
  line-height: 300px;
  font-size: 90px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
  "AppleGothic", sans-serif;
}
h2 {
  position: relative;
  bottom: 50px;
  font-size: 60px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
  "AppleGothic", sans-serif;
}
#p_in_first_div {
  font-size: 20px;
  line-height: 120px;
  vertical-align: middle;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
  "AppleGothic", sans-serif;
}
#first_bg_image {
  display: inline-block;
  position: relative;
  width: 100%;
}
#first_bg_image::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: url(http://pngimg.com/uploads/businessman/businessman_PNG6580.png);
  background-position: 49em 0px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin-top: -1700px;
  width: 120%;
  height: 3100px;
  opacity: 0.8;
  pointer-events: none;
  transform: scale(.80);
}
#second_bg_image {
  display: inline-block;
  position: relative;
  width: 100%;
}
#second_bg_image::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: url(https://image.freepik.com/free-photo/desktop-with-notebook-smartphone-coffee-and-laptop_1112-253.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin-top: 377px;
  height: 1600px;
  background-position: center;
  z-index: -1;
  opacity: 0.7;
  transform: scale(1, 0.8);
}
#header_div {
  width: 100%;
  height: 70px;
  box-shadow: 0px 1px 40px;
  background-color: rgb(143, 0, 46);
}
#header_nav {
  line-height: 70px;
  word-spacing: 25px;
  font-size: 13.4px;
}
#header_div_icon {
  position: relative;
  right: 50px;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}
#current_link_home {
  color: rgb(190, 226, 231);
}
#first_body_div {
  height: 690px;
  width: 820px;
  background-color: rgb(69, 72, 87);
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  margin-bottom: 7%;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.5);
  position: relative;
}
#icon_in_div {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 100px;
  height: 100px;
  padding: 160px 0px 0px 0px;
}
#resume_button {
  background-color: Transparent;
  border: 2px solid rgb(79, 87, 170);
  outline: none;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
  "AppleGothic", sans-serif;
  font-size: 18px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  line-height: 45px;
  width: 220px;
  height: 45px;
  transition-duration: 0.4s;
}
#professional_skills_div_1 {
  width: 230px;
  height: 15px;;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_2 {
  width: 230px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_3 {
  width: 230px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_4 {
  width: 430px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_5 {
  width: 280px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_6 {
  width: 480px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skills_div_7 {
  width: 480px;
  height: 15px;
  background-color: rgb(79, 87, 170);
}
#professional_skill_percentage_80 {
  font-size: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: left;
  position: relative;
  right: -20px;
  top: -4px;
}
#professional_skill_percentage_60 {
  font-size: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: left;
  position: relative;
  right: 130px;
  top: -3px;
}
.h2_line_heights {
  line-height: 450px;
}
.other_links {
  color: rgb(114, 129, 139);
}
.text_align {
  text-align: center;
}
.text_color {
  color: rgb(190, 226, 231);
}
.h2_subheadings_font {
  font-size: 30px;
}
.h2_subheadings_positions {
  position: relative;
  top: -260px;
}
.professional_divs {
  position: relative;
  right: 32px;
  height: 45px;
  top: -210px;
  width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.professional_outside_divs {
  display: inline-block;
  width: 35%;
}
.professional_paragraphs {
  font-size: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: right;
  position: relative;
  right: 40px;
  top: -4px;
}
.professional_outside_skill_bar_divs {
  width: 29%;
  display: inline-block;
  position: relative;
  right: 1.5vw;
}
.professional_skill_percentages_50 {
  font-size: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  position: relative;
  right: 180px;
  top: -4px;
}
.professional_skill_percentage_90 {
  font-size: 15px;
  font-family: Tahoma, Geneva, sans-serif;
  position: relative;
  left: 70px;
  top: -3px;
}

HTML:

    <body lang="en-US">
  <div id="first_bg_image">
  <header>
    <div id="header_div">
      <nav class="text_align" id="header_nav">
        <!--
        image source:
        https://scrapbookalphabet.blogspot.com/2011/08/wood-slat-png-free-scrapbook-letters.html?m=1
        -->
        <img id="header_div_icon"
        src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
        alt="Icon 1">
        <a href="#" id="current_link_home">HOME</a>
        <a href="#prof_id" class="other_links" id="professional_link">
          PROFESSIONAL
        </a>
        <a href="#exper_id" class="other_links" id="experience_link">
          EXPERIENCE
        </a>
        <a href="portfolio_page.html" class="other_links" id="portfolio_link">
          PORTFOLIO
        </a>
        <a href="#second_body_div" class="other_links" id="contact_link">
          CONTACT
        </a>
      </nav>
    </div>
  </header>
  <div class="text_align">
    <h1 class="text_color">
      I<span>'</span>m Chad Wilson<span>.</span>
    </h1>
  </div>
  <div class="text_align">
    <h2 class="text_color h2_subheadings_font">
      Front End Web Developer
    </h2>
  </div>
</div>
<div id="second_bg_image">
  <div id="first_body_div">
    <img id="icon_in_div"
    src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
    alt="Icon 2">
    <p class="text_align text_color" id="p_in_first_div">
      Click the link below to download my resume.
    </p>
    <a href="https://drive.google.com/file/d/0B5NM_iPTWudsRzRzS094Ul9pMTQ/view?usp=sharing"
    id="resume_button"
    class="text_color text_align"
    target="_blank">
      Download Resume
    </a>
  </div>
  <div class="text_align h2_line_heights" id="prof_id">
    <h2 class="text_color">
      <span>01</span> Professional
    </h2>
  </div>
  <div class="text_align">
    <h2 class="text_color h2_subheadings_font h2_subheadings_positions">
      My Knowledge Level in Software
    </h2>
  </div>
  <div class="professional_divs">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Wordpress
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_1">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="professional_skill_percentages_50 text_color">
        50%
      </p>
    </div>
  </div>
  <div class="professional_divs">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Drupal
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_2">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="professional_skill_percentages_50 text_color">
        50%
      </p>
    </div>
  </div>
  <div class="professional_divs">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Wix
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_3">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="professional_skill_percentages_50 text_color">
        50%
      </p>
    </div>
  </div>
  <div class="professional_divs remove_bottom_bar">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Photoshop
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_4">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="text_color" id="professional_skill_percentage_80">
        80%
      </p>
    </div>
  </div>
  <div class="professional_divs">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Illustrator
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_5">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="text_color" id="professional_skill_percentage_60">
        60%
      </p>
    </div>
  </div>
  <div class="professional_divs remove_bottom_bar">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        Javascript
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_6">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="text_color professional_skill_percentage_90">
        90%
      </p>
    </div>
  </div>
  <div class="professional_divs remove_bottom_bar">
    <div class="professional_outside_divs">
      <p class="professional_paragraphs text_color">
        HTML & CSS
      </p>
    </div>
    <div class="professional_outside_skill_bar_divs">
      <div id="professional_skills_div_7">
      </div>
    </div>
    <div class="professional_outside_divs">
      <p class="text_color professional_skill_percentage_90">
        90%
      </p>
    </div>
  </div>
</div>

JSFIDDLE 链接:https://jsfiddle.net/245uqz0p/

Answer 1

我认为此链接可能对您有所帮助。

w3school parallax effect