应用于一个元素而不是另一个元素时的混合混合模式工作答案

【问题标题】：Mix-blend-mode working when applied to one element but not another应用于一个元素而不是另一个元素时的混合混合模式工作
【发布时间】：2020-04-12 15:03:47
【问题描述】：

我在 css 生成的内容上使用 mix-blend-mode 来创建倍增的背景效果。

当我将此生成的元素应用于外包装时，它具有预期的效果：

.standard-cover {
  background: blue;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
}
.standard-cover:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  content: "";
  background: blue;
  mix-blend-mode: multiply;
}
.image-wrap {
  line-height: 0;
}
img {
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.content-wrap {
  position: relative;
  text-align:center;
  z-index: 30;
  min-height: 1em;
  margin: auto;
  padding: 3.33%;
}

<div class="standard-cover">
  <div class="image-wrap">
    <img src="http://placeimg.com/480/480/nature" alt="Nature">
  </div>
  <div class="content-wrap">
    <div class="content">
      <h2>A title</h2>
      <p>A pagragraph</p>
    </div>
  </div>
</div>

当我将它应用到内部包装器时，它不会：

.standard-cover {
  position: absolute;
  background: blue;
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
}
.image-wrap {
  line-height: 0;
}
img {
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.content-wrap {
  position: relative;
  text-align:center;
  z-index: 30;
  min-height: 1em;
  margin: auto;
  padding: 3.33%;
}
.content-wrap:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  content: "";
  background: blue;
  mix-blend-mode: multiply;
}
.content {
  position: relative;
  z-index: 30;
}

<div class="standard-cover">
  <div class="image-wrap">
    <img src="http://placeimg.com/480/480/nature" alt="Nature">
  </div>
  <div class="content-wrap">
    <div class="content">
      <h2>A title</h2>
      <p>A pagragraph</p>
    </div>
  </div>
</div>

在这两种情况下，应用人造背景颜色的实际 css 是相同的：

.class:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  content: "";
  background: blue;
  mix-blend-mode: multiply;
}

但在第一个示例中，它实际上正确地应用了mix-blend-mode 效果。在第二个示例中它没有（尽管检查员确认存在mix-blend-mode 属性并设置为multiply）。

mix-blend-mode 规范是否存在一些我不理解的细微差别？还是我在代码中遗漏了一些重要的东西？

【问题讨论】：

标签： css mix-blend-mode

【解决方案1】：

这都是关于堆叠上下文的。在第一种情况下，伪元素应用于有背景的.standard-cover，因此它的子元素和mix-blend-mode 将正常工作，因为它们都属于相同的堆叠上下文。在第二种情况下，您将伪元素移动到.content-wrap，并且指定了z-index，因此现在它属于另一个堆叠上下文，mix-blend-mode 将不再对外部产生影响。

一个简单的解决方案是从 .content-wrap 中删除 z-index 以避免创建堆叠上下文，并且 mix-blend-mode 将按预期工作：

.standard-cover {
  position: absolute;
  background: blue;
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
}
.image-wrap {
  line-height: 0;
}
img {
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.content-wrap {
  position: relative;
  text-align:center;
  min-height: 1em;
  margin: auto;
  padding: 3.33%;
}
.content-wrap:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  content: "";
  background: blue;
  mix-blend-mode: multiply;
}
.content {
  position: relative;
  z-index: 30;
}

<div class="standard-cover">
  <div class="image-wrap">
    <img src="http://placeimg.com/480/480/nature" alt="Nature">
  </div>
  <div class="content-wrap">
    <div class="content">
      <h2>A title</h2>
      <p>A pagragraph</p>
    </div>
  </div>
</div>

注意：对元素应用非正常的混合模式必须建立新的堆叠上下文 [CSS21]。该组必须然后与包含该元素的堆叠上下文混合和合成。 ^ref

【讨论】：