html - 如何使用文本制作响应式全宽 X 全高背景图像

Question

我想要一个具有不同背景图像的网页，包括彼此之间的文本，但我认为我陷入了困境。背景图像必须覆盖网站的整个宽度并且应该是响应式的。此外，背景图像也可能不会相互重叠。检查过类似的问题，但在这种情况下对我来说效果不佳。

.first-image {
  background-image: url(../Img/-MI4-KK.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: initial;
  background-color: #FFFFFF;
  background-origin: initial;
  background-clip: initial;
}

<div class="first-image">
  <div class="container">
    <p>text</p>
  </div>
</div>

Answer 1

经过一些研究和努力找到了正确的答案。根据图像的高度，我发现 background-size:cover 会影响已显示图像的宽度和高度。因此，我将其替换为 100% auto。此外，在调整屏幕大小后，每个图像下方都有一个空白区域，这是我不想看到的。作为回应，我添加了 55% 的 padding-bottom(对于对我如何得出这个百分比感兴趣的人:1080 高度/1920 宽度 x 100% = +/- 55%)。

.first-image {
	background-image: image 1920 x 1080 A;
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 100%;
	padding-bottom: 55%;

}
.second-image {
	background-image: image 1920 x 1080 B;
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 100%;
	padding-bottom: 55%;
}

.third-image {
	background-image: image 1920 x 1080 C;
	background-size: 100% auto;
	background-position: 100%;
	background-repeat: no-repeat;
	width: 100%;
	padding-bottom: 55%;
}