我想在我的页面上使用一个img作为一个图像幻灯片横幅的背景图像。原因是为了便于访问而包含替代文本。要在背景中移动img，我必须给它一个负的z索引。否则，它总是显示在内容的顶部。标记行作为h1标题包含在横幅上。这些标题不能被选择或交互。一旦横幅是在负的z指数。到目前为止，没有问题。但是，一些背景图像，我想包括在一些网页上，不是由我自己，所以他们需要一个图像信贷。链接，导致原始照片上的图像信贷不能点击。光学，它显示在图像和横幅上方，但不能单击。那么，是否有办法使横幅的内容可交互呢？我可以将图像作为background-image包含在内，但在这种情况下，如何将alt-text包含到background-image中？

.slider {
    width: 100%;
    position: relative;
    height: 600px;
    z-index: -1;
}
.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-image {
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 640px;
    z-index: -2;
}
.image-credits {
    background-color: black;
    color: white;
    padding: 2px 8px;
    margin: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.image-credits a {
    color: white;
}

<div class="slider">
  <div class="banner">
    <img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
    <div class="content">
      <h1>Some tagline</h1>
      <p class="image-credits">Photo by <a href="image-source" target="blank">Photographer</a\></p>
    </div>
  </div>
</div>

我试着用正z值设置页面，但是background-image总是显示在页面上其余内容的顶部，内容仍然是可交互的，而且我对滑块的所有其他元素应用了pointer-events:none;，除了image-credit，这也不起作用。