Question

我正在对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）。

我不了解的混合混合模式规范是否有些细微差别？还是我的代码中缺少一些关键的东西？

Answer 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

当应用于一个元素而不是另一个元素时，混合混合模式可以工作

1 个答案: