如何设置<li>元素内图片与文本同占空间 实现悬停显示图片名

核心实现基于CSS定位规则：给作为容器的<li>设置相对定位创建独立定位上下文，内部图片、说明文本用绝对定位实现叠放，完全不破坏现有flex布局结构。

第一步：调整HTML结构 #

给每个<li>内的图片说明文本单独包裹<span class="img-caption">标签，方便控制样式，示例结构如下：

<div class="gallery-container">
  <ul class="gallery">
    <li class="image">
      <img src="./images/dungeon.jpg" alt="image of the game">
      <span class="img-caption">地牢场景</span>
    </li>
    <li class="image">
      <img src="./images/gallery-background2.jpg" alt="image of the game">
      <span class="img-caption">画廊背景2</span>
    </li>
    <!-- 其余li项按照相同格式补充对应说明文本即可 -->
  </ul>
</div>

第二步：修改CSS代码 #

在原有CSS基础上新增/修改以下规则即可，不需要重构原有布局代码：

.gallery li {
  max-width: 40%;
  /* 新增：创建定位上下文，作为内部绝对定位元素的偏移基准 */
  position: relative;
  /* 新增：设置固定宽高比，避免内部元素脱离文档流后父容器高度塌陷，可根据实际图片比例调整数值 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

/* 覆盖原有全局img样式，仅作用于画廊内图片 */
.gallery li img {
  margin: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 新增：绝对定位铺满整个li容器，默认层级高于文本 */
  position: absolute;
  inset: 0; /* 等价于top:0;left:0;right:0;bottom:0; */
  z-index: 1;
  /* 新增：悬停过渡效果，让交互更自然 */
  transition: opacity 0.3s ease;
}

/* 图片说明文本样式 */
.img-caption {
  position: absolute;
  /* 水平垂直居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  /* 文本样式可根据设计需求自行调整 */
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  padding: 0 1em;
}

/* 悬停交互：鼠标移入时图片降低透明度，露出下方说明文本 */
.gallery li:hover img {
  opacity: 0.3;
}

关键规则说明 #

• 相对定位position: relative不会改变元素本身在正常文档流的位置，因此完全不会影响原有flex布局的排列效果，仅作为内部绝对定位元素的偏移参考基准，解决定位偏移混乱的问题。
• 如果不需要图片透明的效果，也可以调整z-index值实现文本覆盖图片的效果：悬停时给.img-caption设置z-index: 2，同时给文本加半透明黑色背景即可，样式可以灵活调整。
• 如果不需要文本垂直居中，只需要水平居中文本，可以删除caption的top:50%和transform属性，设置bottom: 0加内边距，即可实现底部标题栏的常见展示效果。

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