为纯CSS轮播图的每张幻灯片添加对应文本（无需JavaScript）

搞定！不用JavaScript完全可以实现这个需求，咱们靠CSS的单选按钮:checked状态和相邻兄弟选择器，就能让文本和对应图片同步显示，还能把文本稳稳地浮在图片上方。

第一步：调整HTML结构（保持逻辑关联） #

咱们先确保每个轮播项的单选按钮、图片、文本容器是一组关联的结构，这样CSS选择器能精准匹配到对应的元素：

<div class="slider">
  <!-- 轮播项1 -->
  <input type="radio" id="slide1" name="radio" checked>
  <img src="http://xup.ir/images/39359184745003103315.jpg" />
  <div class="slider-side">
    <span class="title">title1</span>
    <span class="subTitle">subTitle1</span>
  </div>

  <!-- 轮播项2 -->
  <input type="radio" id="slide2" name="radio">
  <img src="http://xup.ir/images/70934477928759834031.jpg">
  <div class="slider-side">
    <span class="title">title2</span>
    <span class="subTitle">subTitle2</span>
  </div>

  <!-- 轮播项3 -->
  <input type="radio" id="slide3" name="radio">
  <img src="http://xup.ir/images/13016878203236126642.jpg">
  <div class="slider-side">
    <span class="title">title3</span>
    <span class="subTitle">subTitle3</span>
  </div>

  <div class="controls">
    <label for="slide1">slide1</label>
    <label for="slide2">slide2</label>
    <label for="slide3">slide3</label>
  </div>
</div>

第二步：修改CSS实现联动和定位 #

接下来咱们完善CSS，重点处理文本容器的定位、默认隐藏，以及和单选按钮的联动显示：

.slider { 
  width: 100%; 
  height: auto; 
  float: right; 
  overflow: hidden; 
  position: relative; /* 给文本容器的绝对定位提供参考基准 */
}

.slider img { 
  float: left; 
  top: 0; 
  left: 0; 
  transition: opacity 0.5s ease-out; 
  opacity: 0; 
  width: 0%; 
  height: auto;
}

.slider input[type="radio"] { 
  display: none; 
}

/* 选中单选按钮时显示对应图片 */
.slider input:checked + img { 
  opacity: 1; 
  z-index: 1; 
  width: 100%;
}

/* 文本容器样式：默认隐藏，绝对定位在图片上方 */
.slider .slider-side {
  position: absolute;
  bottom: 20px; /* 可调整：文本距离图片底部的距离 */
  left: 20px;   /* 可调整：文本距离图片左侧的距离 */
  z-index: 2; /* 确保文本在图片上方 */
  color: white;
  opacity: 0;
  transition: opacity 0.5s ease-out; /* 和图片同步的过渡动画 */
}

/* 选中对应单选按钮时，显示关联的文本容器 */
.slider input:checked + img + .slider-side {
  opacity: 1;
}

.slider .controls { 
  position: relative; 
  top: 0; 
  left: 0; 
  z-index: 3; /* 确保控制按钮在最上层，不被遮挡 */
  width: 100%; 
  height: 30px; 
  float: left;
  margin-top: 10px; /* 调整控制按钮和轮播图的间距 */
}

.slider label { 
  background: rgba(0,0,0,0.8); 
  color: #fff; 
  padding: 10px; 
  display: inline-block; 
  cursor: pointer;
  margin-right: 5px; /* 给按钮之间加点间距 */
}

关键逻辑说明 #

• 给.slider添加position: relative，让文本容器的绝对定位基于轮播容器，不会乱跑。
• 文本容器默认opacity: 0隐藏，通过input:checked + img + .slider-side选择器，精准匹配到被选中单选按钮对应的文本容器，将其opacity设为1显示，还加上了和图片一致的过渡动画，体验更流畅。
• 调整z-index层级：控制按钮(z=3) > 文本(z=2) > 图片(z=1)，确保所有元素的交互和显示层级正确，不会出现按钮被遮挡的情况。
• 你可以根据需求修改.slider-side的bottom、left、字体大小等样式，调整文本在图片上的位置和外观。

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