咨询：如何实现缩放窗口时文本固定于背景图片底部

嘿，我明白你想要的效果——不管浏览器窗口怎么缩放，文本都牢牢贴在背景图的底部，就像示例里的那句“Engineered to help business thrive”一样。我来给你两种靠谱的实现方法，你可以选顺手的用：

方法一：使用定位（Position） #

这种方法兼容性拉满，适合大多数场景。核心思路是给父容器设置相对定位，再让文本容器绝对定位到底部：

修改后的CSS代码：

#showcase {
  min-height: 400px;
  background:url(image.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px 8px #1C242B;
  border-bottom: #45A29E 3px solid;
  position: relative; /* 关键：让子元素的绝对定位基于这个容器 */
}

#showcase .container {
  position: absolute; /* 脱离文档流，相对于父容器定位 */
  bottom: 20px; /* 控制文本和底部的距离，可按需调整 */
  left: 0;
  right: 0; /* 让容器宽度和父容器一致，保证文本居中 */
}

HTML部分保持原样即可：

<section id="showcase">
  <div class="container">
    <h1>HELLO WORLD</h1>
    <!-- 其他文本内容 -->
  </div>
</section>

方法二：使用Flexbox（更现代的方式） #

如果你的项目不用兼容老浏览器，Flexbox是更简洁的选择，代码更少逻辑更清晰：

修改后的CSS代码：

#showcase {
  min-height: 400px;
  background:url(image.jpg) no-repeat center;
  background-size: cover;
  color: #ffffff;
  text-shadow: 2px 2px 8px #1C242B;
  border-bottom: #45A29E 3px solid;
  display: flex; /* 开启flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: flex-end; /* 让子元素靠容器底部对齐 */
  align-items: center; /* 水平居中文本 */
  padding-bottom: 20px; /* 控制文本和底部的间距，替代定位的bottom */
}

这种方法下，.container不需要额外加样式，Flexbox会自动帮我们把文本推到底部并居中。

两种方法都能实现你要的效果，缩放窗口时文本都会稳稳待在背景图底部，你可以根据项目需求来选~

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