如何不使用background-image和position:relative实现文字叠加图片？

你的问题根源是position:relative不会让元素脱离文档流，所以即使通过bottom属性移动文字，元素原本的占位空间依然会保留，导致空白。这里提供两种可行的修复方案：

方案1：使用绝对定位（推荐） #

给包含图片和文字的父容器设置position:relative，然后将文字元素改为position:absolute，这样文字会脱离正常文档流，不再占据空间，同时能相对于父容器精准定位：

/* 给图片+文字的父容器添加相对定位 */
.flex-container > div:nth-child(2) {
  position: relative;
  overflow: hidden; /* 避免hover时的outline超出容器范围 */
}

div .hidden-text {
  transition: 200ms;
  position: absolute; /* 替换原有的position:relative */
  bottom: 2rem; /* 调整到你需要的位置，比如距离底部2rem */
  left: 2rem;
  color: white;
  opacity: 0;
  pointer-events: none;
}

/* 其余样式保持不变 */

方案2：用负margin抵消占位 #

如果不想修改定位方式，可以给文字元素添加负margin来消除它在文档流中的占位：

div .hidden-text {
  transition: 200ms;
  position: relative;
  bottom: 100%;
  margin-bottom: -3em; /* 根据文字的实际高度调整这个值 */
  color: white;
  opacity: 0;
  pointer-events: none;
}

另外补充一点：你当前用div加background-image实现图片展示，其实更推荐用<img>标签，语义化更好，而且同样能实现hover时只改变图片透明度不影响文字的效果：

<div>
  <img src="imgs/tokyo.jpg" class="background-img" alt="Tokyo - Japan">
  <h2 class="hidden-text">Tokyo - Japan</h2>
  <p class="hidden-text">Lorem ipsum dolor sit amet.</p>
</div>

对应的CSS中.background-img:hover的滤镜样式完全可以复用，效果一致。

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