多重背景和 Z-Index 問題

Question

我有一個縮略圖列表，上面有一個標題。 標題的背景應該疊加在后面的圖片上，而不是文字。

HTML：

<a href="#" class="thumbslink">
  <figure>
    <img src="imagelink" />
  </figure>
  <div class="title-wrapper">
    <div class="title">
      <span class="background"></span>
      <p> Title </p>
    </div>
  </div>
</a>

CSS：

a.thumbslink {
  position: relative;
}

a.thumbslink figure {
 aspect-ratio: 3/2;
 position: relative;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.title {
  position: relative;
}

div.title p {
  color: white;
  font-size: 3em;
  line-height: 1;
  width: auto;
  z-index: 1;
  padding: 1rem;
}

div.title span.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  background-color: red;
  mix-blend-mode: multiply;
  z-index: 0;
}

但是<span class="background"> 元素一直位於所有內容之上，在圖像和標題上乘以紅色，即使它的 z-index 表明它應該在標題后面並且標題元素在背景之后呈現跨度。

使用:before和:after偽元素並沒有解決問題。

我能做什么？ 謝謝你。

Answer 1

這不是一個完整的解釋，因為我對z-index和父/子元素之間的關系了解不夠。

因此，處理煩人z-index問題的一個簡單修復方法是將值-1分配給元素以強制其具有較低的優先級。 但是，單獨執行此操作會導致您的紅色背景元素在頁面上的所有其他元素之后變為 go。 因此，為了使其保持在圖像上方，我們需要將紅色背景的父元素也將其z-index設置為使其保持在圖像上方的值。

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } figure { margin: 0; } img { position: absolute; width: 100%; height: 100%; object-fit: cover; } div.title-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } div.title { position: relative; z-index: 1; } div.title p { color: white; font-family: sans-serif; font-size: 3em; line-height: 1; width: auto; font-weight: bold; z-index: 1; padding: 1rem; } div.title span.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; background-color: red; z-index: -1; }

 <a href="#" class="thumbslink"> <figure> <img src="https://picsum.photos/seed/picsum/200/300" /> </figure> <div class="title-wrapper"> <div class="title"> <span class="background"></span> <p> Title </p> </div> </div> </a>