css - 背景图像应调整到内部的 div

Question

我正在尝试创建一个背景图片，里面有一个较小的 div，里面有文本。现在，它在桌面上运行良好，但随着屏幕尺寸变小，带有文本的 div 会覆盖背景图像。

在这些情况下，我希望图像能够自动调整大小。

#cb_1 {
  background-image: url("https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg");
  height: 100%;
  margin: 0px;
  padding: 0px;
  z-index: -1;
}

#cb_1 h1 {
  color: #222;
  padding-top: 20px;
}

#cb_1 h3 {
  color: #356651;
}

#cb_1 p {
  color: #222;
  padding-top: 30px;
  padding-bottom: 40px;
}

#cb_1 article {
  background: rgba(255, 255, 255, 0.6);
  width: 45%;
  padding: 50px 50px;
  position: absolute;
  top: 100px;
}

button.default {
  border-radius: 0px;
  background: transparent;
  border-style: solid;
  border-width: 2px;
  border-color: #356651;
  color: #222;
  font-size: 20px;
  font-family: 'Khand', sans-serif;
  padding: 5px 20px;
}

h1 {
  font-family: 'Khand', sans-serif;
  font-size: 43px;
  font-weight: 100;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-family: 'Khand', sans-serif;
  font-size: 35px;
  font-weight: 100;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}

h3 {
  font-size: 18px;
  line-height: 25px;
}

p {
  font-size: 18px;
  line-height: 25px;
}

<section id="cb_1">
  <div class="container">
    <article>
      <h1>Lorem ipsum dolor sit amet</h1>
      <h3>
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet.
      </p>
      <button type="button" class="default">Stet clita kasd</button>
    </article>
  </div>
</section>

Answer 1

这是您需要的吗？为 #cb_1 article 删除了绝对定位，并为图像容器添加了 background-size: cover、height: 100vh。

#cb_1 {
  background-image: url("https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg");
  background-size: cover;
  margin: 0px;
  padding: 100px 0 0 0;
  height: 100vh;
}

#cb_1 h1 {
  color: #222;
  padding-top: 20px;
}

#cb_1 h3 {
  color: #356651;
}

#cb_1 p {
  color: #222;
  padding-top: 30px;
  padding-bottom: 40px;
}

#cb_1 article {
  background: rgba(255, 255, 255, 0.6);
  width: 45%;
  padding: 50px 50px;
}

button.default {
  border-radius: 0px;
  background: transparent;
  border-style: solid;
  border-width: 2px;
  border-color: #356651;
  color: #222;
  font-size: 20px;
  font-family: 'Khand', sans-serif;
  padding: 5px 20px;
}

h1 {
  font-family: 'Khand', sans-serif;
  font-size: 43px;
  font-weight: 100;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-family: 'Khand', sans-serif;
  font-size: 35px;
  font-weight: 100;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}

h3 {
  font-size: 18px;
  line-height: 25px;
}

p {
  font-size: 18px;
  line-height: 25px;
}

<section id="cb_1">
  <div class="container">
    <article>
      <h1>Lorem ipsum dolor sit amet</h1>
      <h3>
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet.
      </p>
      <button type="button" class="default">Stet clita kasd</button>
    </article>
  </div>
</section>