背景图像应重新设置为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>

Answer 2

我认为您需要在background-size:100% 100%;内的@media响应代码中使用#cb_1，并根据#cb_1 article内的屏幕修复您的宽度和填充

*{ margin:0px; padding:0px;}
#cb_1 {
  background-image: url("https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg");
  width:100%;
  height:100vh;
  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;
}

@media only screen and (max-width:768px){
	#cb_1 {
  background-image: url("https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg");
  width:100%;
  height:100vh;
  margin: 0px;
  padding: 0px;
  z-index: -1;
  background-size:100% 100%;
}

#cb_1 article{ width:100%; padding:20px; top:50px;}

}

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