如何使文本响应全宽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

经过一番研究和努力，找到了正确的答案。根据图像的高度，我发现背景大小：封面会影响已显示图像的宽度和高度。因此我用100％auto替换了它。此外，在调整屏幕大小后，每个图像下面都有一个空白区域，这是我不想看到的。为此我添加了55％的填充底部（对于有兴趣我是如何达到这个百分比的人：1080高度/ 1920宽度x 100％= +/- 55％）。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是您的可能解决方案：http://codepen.io/anon/pen/GoXpXv

我为你删除了容器，因为你没有在CSS中定义它。我为每个图像部分创建了不同的类，让它们占据宽度的100％和高度的33.333％。我将body，html和div p margins和padding设置为0，因此周围没有空白区域。这将适应任何屏幕尺寸。如果您有任何问题，请告诉我。

HTML：

<div class="first-image">
  <p>first image</p>
</div>
<div class="second-image">
  <p>second image</p>
</div>
<div class="third-image">
  <p>third image</p>
</div>

CSS：

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.first-image {
  width: 100%;
  height: 33.333%;
  background-image: url(http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg);
  background-size: cover;
  background-position: center;
}
.second-image {
  width: 100%;
  height: 33.333%;
  background-image: url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg);
  background-size: cover;
  background-position: center;
}
.third-image {
  width: 100%;
  height: 33.333%;
  background-image: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg);
  background-size: cover;
  background-position: center;
}
div p {
  margin: 0px;
  color: #FFFFFF;
}