如何制作一个部分的背景图像以显示超过第二部分？

Question

这是我的PSD

我想把这张照片放到第二节以下。这是我到目前为止的HTML外观。

它不会下面因为我不知道它的css会是什么。我想我必须改变英雄背景类的CSS ..可能是溢出或其他东西。任何人都可以帮我解决我的问题？顺便说一句，这个英雄形象是独立的形象..让我给你看看照片。

以下是第一部分和第二部分的html代码。

   <div class="hero-background">
        <!-- Navigation bar -->
      <div class="navbar-fixed">
            <div class="nav-wrapper">
            <nav>
              <div class="container">
              <a href="#" class="brand-logo hide-on-small-only">
                <img class="resonsive-img" src="img/logo.png"/>
              </a>
                        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons black-text">menu</i></a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a class="white-text" href="#howItWorks">How it works</a></li>
                <li><a class="white-text" href="#aboutUs">About</a></li>
                <li><a class="white-text" href="#faq">FAQ</a></li>
                <li><a class="white-text" href="#contact">Contact</a></li>
                <li><a class="waves-effect waves-light btn stack-btn" href="#stack">Earn more</a></li>
              </ul>
              </div>
            </nav>
            </div>
      </div>

        <ul class="sidenav" id="mobile-demo">
            <a href="#" class="brand-logo sidenav-close">
                <img class="resonsive-img" src="img/logo.png"/>
            </a>
            <li><a class="mobile-menu-text sidenav-close" href="#howItWorks">How it works</a></li>
            <li><a class="mobile-menu-text sidenav-close" href="#aboutUs">About</a></li>
            <li><a class="mobile-menu-text sidenav-close" href="#faq">FAQ</a></li>
            <li><a class="mobile-menu-text sidenav-close" href="#contact">Contact</a></li>
            <li><a class="waves-effect waves-light btn stack-btn sidenav-close" href="#stack">Earn more</a></li>
        </ul>

      <!-- End Navigation bar -->

    <!-- Hero section -->
      <section id="hero">
                <!-- Desktop & tablet version -->
          <div class="row valign-wrapper hide-on-small-only" style="padding-top: 10%; height: 100vh;">
            <div class="col s12">
                        <div class="container">
                            <h2 class="hero-title1">Earn more effortlessly</h2>
                            <h5 class="hero-title5">Stack boosts your wealth by automatically investing your excess cash</h5>
                            <a class="waves-effect waves-light btn stack-btn" href="#howItWorks">Show me how</a>
                        </div>

            </div>
            <div class="right" style="overflow: hidden; display: inline-block; padding-bottom: 5%">
              <img class="resonsive-img" src="img/macbook.png"/>
            </div>
          </div>
                <!-- Mobile version -->
                <div class="col s12 hide-on-med-and-up" style="padding-top: 30%">
                    <div class="container">
                        <h2 class="hero-title1">Earn more effortlessly</h2>
                        <p class="hero-title5"><b>Stack boosts your wealth by automatically investing your excess cash</b></p>
                        <a class="waves-effect waves-light btn stack-btn" href="#howItWorks">Show me how</a>
                    </div>
                </div>
      </section>
    </div>

    <!-- End Hero section -->
<!-- How It Works section -->
<section id="howItWorks">
  <div class="container">
    <div class="section-heading">
      <h2 class="center-align">How It Works</h2>
    </div>
    <div class="row">
      <div class="col l6 m12 center-align">
        <row>
           <i class="large material-icons howItWorks-icon">device_hub</i>
        </row>
        <row>
          <div class="howItWorks">
            <h5>Seamless Connection</h5>
            <p>Grow your Stack by connecting your bank account and creating your investment profile in just two minutes.</p>
          </div>
        </row>
      </div>
      <div class="col l6 m12 center-align">
        <row>
          <i class="large material-icons howItWorks-icon">trending_up</i>
        </row>
        <row>
          <div class="howItWorks">
            <h5>Boosted Earnings</h5>
            <p>A smart algorithm monitors your spending patterns. Any spare cash is transferred into your Stack investment portfolio, giving you higher returns.</p>
          </div>
        </row>
      </div>
      <div class="col l6 m12 center-align">
        <row>
          <i class="large material-icons howItWorks-icon">cached</i>
        </row>
        <row>
          <div class="howItWorks">
            <h5>Frictionless Withdrawals</h5>
            <p>We know that sometimes life gives you lemons, so Stack lets you access your cash in real time with our instant bank withdrawal feature.</p>
          </div>
        </row>
      </div>
      <div class="col l6 m12 center-align">
        <row>
          <i class="large material-icons howItWorks-icon">account_balance</i>
        </row>
        <row>
          <div class="howItWorks">
            <h5>Strong Foundations</h5>
            <p>You can trust Stack's tech - its origins are in advanced computer science, nobel prize winning economics and is fully licensed and governed by ASIC*.</p>
            <small>* Australian Securities Investment Commission</small>
          </div>
        </row>
      </div>
    </div>
  </div>
</section>
<!-- End How It Works section -->

<!-- Stack section -->

<section>
  <div class="stack-heading-background">
    <div class="container center-align">
      <div class="section-heading">
        <h2>Stack earns you more</h2>
      </div>
    </div>
  </div>
</section>

<section id="stack">
  <div class="stack-background">
    <div class="container">
      <form class="col s12">
        <!-- {% csrf_token %} -->
        <row class="center-align">
          <div class="col s12 stack-heading5">
            <h5>How much do you save per month?</h5>
          </div>
          <div style="padding-top: 50px;">
            <div id="savings-slider"></div>
          </div>
          <div class="center-align">
            <h5 id="input-format"></h5>
          </div>
        </row>
        <row>
          <div class="center-align">
                        <p><i class="small material-icons howItWorks-icon">info</i>
                        <span class="answer">The average millenial saves $500 per month. Millenials are actually the best savers in Australia! Must be all those Netflix and chill nights...</span></p>
          </div>
        </row>
        <row class="center-align">
          <div class="col s12 stack-heading5" style="padding-top:10px">
            <h5>What are you saving for?</h5>
          </div>
        </row>
                <row>
                    <div class="col m6">
                        <div class="stack-radio-btn center-align">
                <label>
                  <input type="radio" id="savingTargetHoliday" name="inputSavingTarget" value="5000"/>
                  <img class="circle responsive-img hoverable" src="img/icon/holiday.png">
                  <div class="stack-label">Holiday</div>
                </label>
              </div>
              <div class="stack-radio-btn center-align">
                <label>
                  <input type="radio" id="savingTargetCar" name="inputSavingTarget" value="25000"/>
                  <img class="circle responsive-img hoverable" src="img/icon/car.png">
                  <div class="stack-label">Car</div>
                </label>
              </div>
              <div class="stack-radio-btn center-align">
                <label>
                  <input type="radio" id="savingTargetHouse" name="inputSavingTarget" value="75000"/>
                  <img class="circle responsive-img hoverable" src="img/icon/house.png">
                  <div class="stack-label">House</div>
                </label>
              </div>
              <div class="stack-radio-btn center-align">
                <label>
                  <input type="radio" id="savingTargetWedding" name="inputSavingTarget" value="20000"/>
                  <img class="circle responsive-img hoverable" src="img/icon/wedding.png">
                  <div class="stack-label">Wedding</div>
                </label>
              </div>
              <div class="stack-radio-btn center-align">
                <label>
                  <input type="radio" id="savingTargetRetirement" name="inputSavingTarget" value="1000000"/>
                  <img class="circle responsive-img hoverable" src="img/icon/retirement.png">
                  <div class="stack-label">Retirement</div>
                </label>
              </div>
                    </div>
          <div class="stack-radio-btn center-align">
            <label>
              <input type="radio" id="savingTargetAvocado" name="inputSavingTarget" value="2500"/>
              <img class="circle responsive-img hoverable" src="img/icon/avocado.png">
              <div class="stack-label">Smashed Avo</div>
            </label>
          </div>
        </row>
                <row>
                    <div class="holidayAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">Cocktails on the beach anyone?! $5,000 should do it in style</span></p>
                    </div>
                    <div class="carAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">Vroom vroom! Impress your peeps with a brand new $20,000 car</span></p>
                    </div>
                    <div class="houseAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">Not everyone is locked out of the housing market! $75,000 should get you a deposit on a sweet pad</span></p>
                    </div>
                    <div class="weddingAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">Splurge $20,000 on your big day and don’t feel guilty about skimping out on your distant relatives!</span></p>
                    </div>
                    <div class="retirementAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">You'll need at least $1,000,000 to enjoy the perks of retirement...like making a grand entrance at the pokies in the latest model mobility scooter!</span></p>
                    </div>
                    <div class="avocadoAnswer center-align">
                            <p><i class="small material-icons howItWorks-icon">info</i>
                            <span class="answer">Two raw vegan brunches every weekend will set you back $2,500 each year! Better start saving...</span></p>
                    </div>
                </row>
        <div class="row" style="padding-bottom:15%">
          <div class="input-field col s12 center-align">
            <button class="btn waves-effect waves-light stack-btn" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- End Stack section -->

现在是我的css代码

/*------------------------------------*\
    #HERO Section
\*------------------------------------*/

.hero-background {
  background-image: url("../img/hero-bg.png");
  background-color: #EAEAEA;
  background-repeat: no-repeat;
  height: auto;
  background-size: cover;
  background-position: right top;
}

@media only screen and (max-width: 993px) {
  .hero-background {
    background-position: 75% 50%;
  }
}

.hero-title1 {
  color: #4741d6;
  padding-top: 30px;
  padding-bottom: 10px;
    line-height: 1.2;
}

.hero-title5 {
  color: #4741d6;
  padding-bottom: 30px;
    line-height: 1.5;
}

/*------------------------------------*\
    #HOW IT WORKS Section
\*------------------------------------*/

.howItWorks {
  padding: 0px 60px 20px 60px;
}

.howItWorks-icon {
  color: #4741d6;
}

Answer 1

我刚检查了您提供的链接，我试图实现相同的

小提琴：https://jsfiddle.net/s92o1xq9/1/

您必须对不同的断点使用媒体查询来更改 img 的比率 >

.hero-background {
  background-color: #ccc;
  height: 75vh;
  position: relative;
  z-index: 6;
}

.overlay {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.overlay img {
  max-width: 100%;
  height: auto;
}

.data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<div class="hero-background">
  <div class="overlay">
    <img src="http://djgt.co.uk/random/stack/img/hero-bg.png" alt="">
  </div>
  <div class="data">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione atque, error maiores minima modi ipsam possimus rerum ad molestias est architecto, quae aperiam sunt eaque veritatis aliquid fugiat maxime. Impedit?
  </div>
</div>