如何用img标签作为轮播横幅背景并保障内容可交互？

一、用img标签做背景时修复交互问题 #

调整结构和CSS就能解决层叠与点击穿透的问题：

• 把轮播img、h1标题、图片来源链接放在同一个相对定位的父容器里，父容器无需额外设置z-index（或仅设置不会覆盖其他页面内容的正z-index）
• 给img设置绝对定位铺满容器，z-index设为-1，同时用object-fit: cover保证图片适配容器：

  .carousel-container {
    position: relative;
    width: 100%;
    height: 400px; /* 按需设置高度 */
  }
  .carousel-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none; /* 关键：让点击穿透到上层元素 */
  }
  

• 上层的h1和链接不用设置z-index，默认层叠顺序会高于z-index:-1的img；加上pointer-events: none后，点击会直接落到标题和链接上，不会被img拦截。

二、改用background-image时添加无障碍替代文本 #

background-image本身没有alt属性，可通过以下两种方式补全无障碍支持：

1. 屏幕阅读器专用隐藏文本 #

在背景容器里添加包含替代文本的元素，用CSS将其视觉隐藏，但保留屏幕阅读器可访问性：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

对应HTML结构：

<div class="carousel-banner" style="background-image: url('your-image.jpg');">
  <span class="sr-only">这里写当前轮播图的描述文本，比如「秋日山林红叶景观」</span>
  <h1>横幅标题</h1>
  <a href="credit-url">图片来源</a>
</div>

如果是轮播切换，记得动态更新这个隐藏文本的内容。

2. ARIA属性直接标注 #

给背景容器添加aria-label属性，直接写入图片描述：

<div class="carousel-banner" aria-label="秋日山林红叶景观轮播图" style="background-image: url('your-image.jpg');">
  <h1>横幅标题</h1>
  <a href="credit-url">图片来源</a>
</div>

若描述文本已在页面其他位置存在，也可用aria-labelledby关联对应元素ID：

<div class="carousel-banner" aria-labelledby="banner-desc" style="background-image: url('your-image.jpg');">
  <span id="banner-desc" class="sr-only">秋日山林红叶景观轮播图</span>
  <h1>横幅标题</h1>
  <a href="credit-url">图片来源</a>
</div>

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