有没有可能用mix-blend-mode来实现这一点？

Question

我正在尝试用mix-blend-mode实现一些东西，我想知道这是否可能。我想使用mix-blend-mode来创建“相乘”效果，同时保持文本为纯白。我在这里看到过类似的问题，但与我的情况略有不同，我相信…

我的(简化) HTML：

    <div class="box">
            
            <div class="content">
                
                <div class="container">
                    <h1 class="header">HEADLINE</h1>
                    <div class="description"><p>Subhead</p></div>
      </div>
      
        </div> <!-- .content -->
            
    </div>

...and my CSS：

.box {
  display: flex;
align-items: flex-end;
    height: 300px;
width: 700px;
    background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-repeat: no-repeat;
    }
    
    
.content {
  float: left;
  width: 100%;
}

.container {
background-color: red;
 mix-blend-mode: multiply;
}

h1, p {
  color: white;
  margin: 0;
  padding: 10px;
}

以下是小提琴的结果：

https://jsfiddle.net/cosmocanuck/7zhwgo0s/55/

但我需要文本保持白色，而不是“剪掉”。

我在这里尝试遵循拉沙德的回应：

Remove mix-blend-mode from child element

但我的情况虽然非常接近，但却有些不同(包括使用flexbox将包含文本的元素底部对齐)，到目前为止，尽管尝试了很多次，但我还是没能破解这个问题。

有谁能给我指个方向吗？谢谢!

Answer 1

确保混合背景和文本位于单独的堆叠上下文中，并且文本在背景上呈现，而不是在背景下呈现。

当前代码不起作用的原因是文本元素是设置mix-blend-mode的容器元素的子元素。mix-blend-mode将混合容器中的所有内容，包括文本--这是无法避免的。

您需要两件事才能使其工作：

1. 确保文本不是设置背景和混合模式的元素的子级。
2. 确保文本在设置背景和混合模式的元素上呈现，因此不受其影响。

挑战在于背景的大小必须取决于内容的大小。其中一种方法是使用CSS Grid Layout

• 定义一个自动调整大小的网格区域
• 将背景和文本放入该区域(以便它们重叠)
• 让文本指定区域的大小
• 使背景伸展到区域的大小，这由文本的大小决定<

>F220

然后，在文本元素上设置isolation: isolate，以确保它呈现在背景元素的上方，而不是背景元素的下方。

​

.container {
  display: grid;
  grid-template-areas: 'item';
  place-content: end stretch;
  height: 300px;
  width: 700px;
  background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.container::before {
  content: '';
  grid-area: item;
  background-color: red;
  mix-blend-mode: multiply;
}

.item {
  grid-area: item;
  isolation: isolate;
  color: white;
}

h1,
p {
  margin: 0;
  padding: 10px;
}

<div class="container">
  <div class="item">
    <h1>HEADLINE</h1>
    <p>Subhead</p>
  </div>
</div>

​