背景multiply混合模式与Z-Index层级异常问题求助

问题出在mix-blend-mode的作用逻辑：当背景元素和文字处于同一父容器时，混合模式会让背景与所有上层元素（包括文字）产生混合，即便设置z-index也无法隔离——因为混合模式的作用范围是整个堆叠上下文。

要实现标题背景仅与图片混合、文字不受影响，需要将背景元素与图片归为同一堆叠上下文，文字单独置于更高层级：

调整后的HTML代码 #

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

对应的CSS代码 #

a.thumbslink {
  position: relative;
  display: inline-block; /* 确保容器包裹内部元素 */
}

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

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

/* 背景元素移入figure，与图片共享堆叠上下文 */
span.title-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 2rem;
  background-color: red;
  mix-blend-mode: multiply;
  width: auto;
  min-width: fit-content;
  height: fit-content;
}

div.title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; /* 确保文字层级高于图片和背景 */
}

.title {
  color: white;
  font-size: 3em;
  line-height: 1;
  width: auto;
  padding: 1rem;
  margin: 0;
}

核心逻辑 #

1. 隔离混合范围：将背景元素移入figure内部，使其仅与同层级的图片产生混合，不会影响外部的文字元素。
2. 层级置顶文字：给文字容器设置z-index: 1，让文字始终处于图片和背景的上方，完全脱离混合模式的作用范围。
3. 自适应背景尺寸：通过width: auto和fit-content让背景自适应文字宽度，配合transform实现居中对齐。

如果不想修改HTML结构，也可以用figure的伪元素替代额外的span：

a.thumbslink figure::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 2rem;
  background-color: red;
  mix-blend-mode: multiply;
  width: auto;
  min-width: fit-content;
  height: fit-content;
}

这种方式无需新增DOM元素，但要让伪元素尺寸完全匹配文字，需要用JS同步文字容器的宽高。

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