1

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

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

.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）。

混合混合模式规范是否有一些我不理解的细微差别？还是我在代码中遗漏了一些重要的东西？

4

1 回答 1

1

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

一个简单的解决方案是删除 z-index.content-wrap以避免创建堆叠上下文，并且 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]。然后必须将该组与包含该元素的堆叠上下文混合并合成。 参考

于 2019-12-20T09:21:35.547 回答