背景图像应调整为内部的 div答案

【问题标题】：Background Image should rezise to div inside背景图像应调整为内部的 div
【发布时间】：2017-12-30 20:08:16
【问题描述】：

我正在尝试创建一个带有较小 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>

【问题讨论】：

您好。您已在代码中包含图像的相对路径。您能否在线上传您的图片，并更新您的代码以链接到在线版本？我们无法看到您的本地图像，重要的是能够看到有问题的图像以帮助解决此问题:)
抱歉，我自己现在正在使用占位符。尝试使用这张图片 - 它的大小差不多：randnotizen.org/wp-content/uploads/full/…
在你的#cb_1 添加background-size: cover; 认为这就是你要找的。如果是，我会发布答案。

标签： css background background-image image-resizing autoresize

【解决方案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>

【讨论】：

【解决方案2】：

我认为您需要在@media 内部使用background-size:100% 100%; 响应代码#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>

【讨论】：