如何通过CSS使背景图高度匹配叠加图，同时保留叠加图与文字并排布局？

你的问题核心是浮动元素导致父容器高度塌陷：<img>用了float: left后脱离了文档流，作为父容器的<section>是默认的static定位，无法识别浮动元素的高度，只会被里面的<p>标签撑高，所以背景图只显示文本覆盖的顶部区域。

下面给你两种可行的解决方法：

方法一：清除浮动（兼容旧浏览器） #

在<section>内部末尾添加清除浮动的元素，或者用CSS伪元素实现，让父容器能包裹住浮动的图片：

修改后的代码（添加清除浮动元素）：

<section style="position: static; background-color: black; margin: 0; padding: 0; width: 100%; background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover;">

  <img style="float: left; width: 50%; margin: 1%;" src="overlay-image.jpg" alt="Image overlaid on background image.">

  <p style="color:white;">Text overlaid on background image.</p>
  
  <!-- 清除浮动的元素 -->
  <div style="clear: both;"></div>
</section>

更简洁的伪元素方案（无需额外HTML元素）：

<style>
  .bg-section::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<section class="bg-section" style="position: static; background-color: black; margin: 0; padding: 0; width: 100%; background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover;">

  <img style="float: left; width: 50%; margin: 1%;" src="overlay-image.jpg" alt="Image overlaid on background image.">

  <p style="color:white;">Text overlaid on background image.</p>
</section>

方法二：改用Flexbox布局（现代方案推荐） #

放弃浮动，用Flexbox实现并排布局，天然避免高度塌陷问题，代码更简洁：

<section style="display: flex; background-color: black; margin: 0; padding: 1%; width: 100%; background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; align-items: flex-start;">

  <img style="width: 50%; margin-right: 2%;" src="overlay-image.jpg" alt="Image overlaid on background image.">

  <p style="color:white; flex: 1;">Text overlaid on background image.</p>
</section>

这里用display: flex让子元素并排，align-items: flex-start确保内容顶部对齐，flex:1让文本块占满剩余宽度，同时父容器会自动适应图片的高度，背景图就能完整显示对应区域了。

内容的提问来源于stack exchange，提问作者Coder1979