如何使背景图像和背景图像中的元素响应？答案

【问题标题】：How to make background image and elements in background image responsive?如何使背景图像和背景图像中的元素响应？
【发布时间】：2020-04-10 14:17:45
【问题描述】：

我用 4 个不同的background-image 编写了一个简单的网页，background-image 元素中有元素（图像、文本、表格），但是看着它，它没有响应。我怎样才能使这个响应？例如他们的表格，如果有 3 列，那么当在移动设备中查看时，我希望每列都降到底部？我怎样才能做到这一点？请在此处找到我的代码：

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image1 {
  background-image: url("https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-11-10-59-40___851_Background-1.jpg");
  background-color: #363937;
  height: 1060px;
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image2 {
  background-image: url("https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-11-10-59-41___851_Background-2.jpg");
  background-color: #363937;
  height: 1060px;
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image3 {
  background-image: url("https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-11-10-59-42___851_Background-4.jpg");
  background-color: #363937;
  height: 1100px;
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text3 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image4 {
  background-image: url("https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-11-10-59-41___851_Background-3.jpg");
  background-color: #363937;
  height: 490px;
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text4 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-image5 {
  background-image: url("");
  background-color: #353937;
  height: 450px;
  width: 1200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text5 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#rcorners1 {
  /*border-radius: 25px;*/
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 15px;  
}
#rcorners2 {
  /*border-radius: 25px;*/
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background: #555555;
  padding: 20px; 
  width: 200px;
  height: 40px;  
}

#rcorners3 {
  /*border-radius: 25px;*/
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 120px;
  height: 22px;  
}
#rcorners4 {
  /*border-radius: 25px;*/
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background: #555555;
  padding: 20px; 
  width: 120px;
  height: 100px;  
}

<div class="hero-image1">
  <div class="hero-text1">
    <br/><br/><br/><br/><br/><br/>
    <img src="icons/[2019-12-05-07-56-32]___Asset-1@4x.png" width="100px">
    <h1 style="font-size:60px">Our Vision</h1> <br/>
    <h2 style="font-size:50px">To simplify the complex.</h2>
    <!-- <button>Hire me</button> -->
  </div>
</div>

<div class="hero-image2">
  <div class="hero-text2">
    <img src="icons/[2019-12-05-07-56-32]___Asset-2@4x.png" width="100px">
    <h1 style="font-size:60px">Our Mission</h1>
    <h2 style="font-size:50px">We believe lending should be frictionless, secure, and trusted - from the borrower to the secondary market.</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr align="center">
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-34___Asset-4@4x.png" width="100px"></th>
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-35___Asset-5@4x.png" width="100px"></th> 
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-35___Asset-6@4x.png" width="100px"></th>
        </tr>
        <tr align="center">
          <td><p style="margin: 0px !important" id="rcorners1">Frictionless</p><p style="margin: 0px !important" id="rcorners2">Easy, fast, efficient, and continuously flowing</p></td>
          <td><p style="margin: 0px !important" id="rcorners1">Secure</p><p style="margin: 0px !important" id="rcorners2">Protected data, secure platform</p></td>
          <td><p style="margin: 0px !important" id="rcorners1">Trusted</p><p style="margin: 0px !important" id="rcorners2">Trusted assets, trusted transactions</p></td>
        </tr>
      </table>
  </div>
</div>

<div class="hero-image3">
  <div class="hero-text3">
    <br/><br/><br/><br/><br/><br/><br/>
    <img src="icons/[2019-12-05-07-56-33]___Asset-3@4x.png" width="100px">
    <h1 style="font-size:60px">Our Values</h1>
    <h2 style="font-size:50px">We operate by the following guiding principles and beliefs:</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr align="center">
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-35___Asset-7@4x.png" width="100px"></th>
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-36___Asset-8@4x.png" width="100px"></th> 
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-36___Asset-9@4x.png" width="100px"></th>
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-36___Asset-10@4x.png" width="100px"></th> 
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-37___Asset-11@4x.png" width="100px"></th>
        </tr>
        <tr align="center">
          <td><p style="margin: 0px !important" id="rcorners3">Own It</p><p style="margin: 0px !important" id="rcorners4">By solving problems, being responsible, and taking action</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">Learn, Teach, Grow</p><p style="margin: 0px !important" id="rcorners4">By thinking critically, challenging with respect, and suspending judgment</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">Elevate and Innovate</p><p style="margin: 0px !important" id="rcorners4">By continually improving and possessing a can-do attitude</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">Do the Right Thing</p><p style="margin: 0px !important" id="rcorners4">With trust, inclusiveness, dignity, and respect</p></td>
          <td><p style="margin: 0px !important" id="rcorners3">Think Client First</p><p style="margin: 0px !important" id="rcorners4">By understanding our clients to create value and customers for life</p></td>
        </tr>
      </table>
  </div>
</div>

<div class="hero-image4">
  <div class="hero-text4">
    <!-- <h1 style="font-size:50px">I am Jane Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button> -->
  </div>
</div>

<div class="hero-image5">
  <div class="hero-text5">
    <h1 style="font-size:50px">Living Our Vision, Mission, and Values</h1>
    <h2>How do we live our vision, mission, and values:</h2>
    <br/>
    <!-- <button>Hire me</button> -->
      <table style="width:100%">
        <tr>
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-37___Asset-12@4x.png" width="100px"></th>
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-37___Asset-13@4x.png" width="100px"></th> 
          <th><img src="https://www.eoriginal.com/wp-content/uploads/2019/12/2019-12-05-07-56-38___Asset-14@4x.png" width="100px"></th>
        </tr>
        <tr>
          <td><p><b>With our clients</b></p></td>
          <td><p><b>With our employees</b></p></td>
          <td><p><b>As an organization</b></p></td>
        </tr>
      </table>
  </div>
</div>

【问题讨论】：

在顶部创建一个父 div 并尝试在顶部 div 中添加 container-fluid。
只需在顶部添加
并在最后关闭此标签。
@MenimE 试过没用。
@RohanRao 试过没用。
@RajveerSingh，尝试为每个英雄图像添加表单组类。然后看看。这将使您的图像垂直对齐。