两个并排的背景图像，其中包含文本答案

【问题标题】：Two background images side by side with text inside of them两个并排的背景图像，其中包含文本
【发布时间】：2020-11-18 03:28:40
【问题描述】：

我试图将两张图片并排作为背景，并带有一些文字。一旦我开始定位文本，整个浏览器就会开始向右扩展。我想只使用要定位的文本进行操作。谢谢你的帮助。

.container1{
  background-image: url(pictures/1.png),url(pictures/2.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-position: left 0px,right 0px;
  background-size: 50% auto,50% auto;
}

.cityText{
  position: relative;
  top: 50%;
  left: 80%;
}

<div class="container1"> 
  <div class="cityText">
    <q>
      Life is what happens <br>
      when you’re busy<br>
      making other plans.</q>
      <p>-John Lennon-</p>
  </div>
  <div class="beautyText">
    <q>
    People are like stained - glass windows.<br>
    They sparkle and shine when the sun is out,<br>
    but when the darkness sets in, their true beauty<br>
    is only if there is a light from within.
    </q>
    <p>-Elisabeth Kubler-Ross-</p> 
  </div> 
</div>

【问题讨论】：

将position: absolute; 添加到cityText 可以解决您的问题吗？
这能回答你的问题吗？ Positioning text over image (html,css)
是的。谢谢

标签： html css

【解决方案1】：

.container1{
  background-image: url(pictures/1.png),url(pictures/2.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-position: left 0px,right 0px;
  background-size: 50% auto,50% auto;
  position:relative;
}

.cityText{
  position: absolute;
  top: 50%;
  left: 80%;
}

<div class="container1"> 
  <div class="cityText">
    <q>
      Life is what happens <br>
      when you’re busy<br>
      making other plans.</q>
      <p>-John Lennon-</p>
  </div>
  <div class="beautyText">
    <q>
    People are like stained - glass windows.<br>
    They sparkle and shine when the sun is out,<br>
    but when the darkness sets in, their true beauty<br>
    is only if there is a light from within.
    </q>
    <p>-Elisabeth Kubler-Ross-</p> 
  </div> 
</div>

请将 position:absolute; 添加到 cityText 并将 position:relative; 添加到 container1 类

【讨论】：

【解决方案2】：

你可以试试我添加position:absolute;到.cityText和position:relative;到.container1的附加代码。它肯定会解决你的问题，但如果它没有让我在 cmets 中知道，我会尽力帮助你。

我建议您使用 Viewport Units，例如 vw 表示 width，vh 表示 height 而不是 @987654327 @ 或 %，因为它将帮助您使您的网页/网站具有响应性。

.container1{
  background-image: url(pictures/1.png),url(pictures/2.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-position: left 0px,right 0px;
  background-size: 50% auto,50% auto;
  position: relative;
}

.cityText{
  position: absolute;
  top: 50%;
  left: 80%;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="container1"> 
  <div class="cityText">
    <q>
      Life is what happens <br>
      when you’re busy<br>
      making other plans.</q>
      <p>-John Lennon-</p>
  </div>
  <div class="beautyText">
    <q>
    People are like stained - glass windows.<br>
    They sparkle and shine when the sun is out,<br>
    but when the darkness sets in, their true beauty<br>
    is only if there is a light from within.
    </q>
    <p>-Elisabeth Kubler-Ross-</p> 
  </div> 
</div>
</body>
</html>

【讨论】：

非常感谢您帮助解决了这个问题。现在我可以看到第二个背景 img。与第一个在底部缺少非常细的线不同。如果可以的话，您是否知道在我调整浏览器大小时确保文本保持在同一位置并且不移动但随着浏览器大小缩小。再次感谢您
@Tommy 使文本具有响应性（即，当您调整浏览器大小时，它应该保持在同一位置）也使用 vw 来代替 px。如果它不起作用，请告诉我，对于迟到的回复感到抱歉。
我按照你的建议做了，但是当我调整浏览器 img 的大小时。缩小并在右侧留下大的空白空间。我也试图让我的元素保持在相同的大小，在相同的位置（不缩小），当我调整浏览器的大小并且只是在右/底部获得滚动条但仍然没有成功。在我调整浏览器 img 大小后，当我用宽度 % 替换 vw 时也在 container1 中。缩小并在右侧留下空白空间。很好，你不能马上回复我很高兴你的帮助。谢谢
嘿，快来看看我是否解决了您的问题，您是否喜欢我的建议，或者我是否需要改进我的技能和建议？因为我阅读了您帖子中的 cmets，看来您的问题已解决，但如果没有，请告诉我。
嗨，不，我仍然有这个问题，因为我不想在我的浏览器调整大小时有那个空白空间。基本上，当您调整此网站的大小时，我希望拥有相同的效果，所有元素都移动得很好并且它们保持整洁。你能告诉我当我在调整浏览器大小时为 vw 更改 % 时我右边有空白空间。