如何制作一个部分的背景图像来显示略高于第二部分的部分？

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的ratio

​

.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>

​

Answer 2

在这里，你需要根据截图是切片的模式，在png格式的笔记本电脑图像，并把它放在一个div中，使其绝对相对于主横幅部分。

希望这对你有帮助。请查看示例代码片段。

​

.banner {
height: 500px;
position: relative;
display: flex;
align-items: center;
background: #eee;
z-index: 1;
}

.content {
padding: 30px 0;
}

.ab {
position: absolute;
right: 0;
top: 0;
}

<div class="banner">
  <h1>Hello Dummy is here</h1>
  
  <div class="ab">
    <img src="https://image.ibb.co/eY8X5d/Untitled_1.png">
  </div>
</div>

<div class="content">
  <h1>Hello Dummy is here</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

​