html - 是否可以通过混合混合模式实现这一目标？

Question

我正在尝试使用混合混合模式来实现某些目标，我想知道这是否可能。我想使用混合混合模式来创建“相乘”效果，同时将其中的文本保持为纯白色。我在这里看到过类似的问题，但与我的情况略有不同，我相信......
我的(简化的)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>

...和我的 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;
}

这是结果的 fiddle :
https://jsfiddle.net/cosmocanuck/7zhwgo0s/55/
但我需要文字保持白色，而不是“剪掉”。
我在这里尝试关注 Rashad 的回复:
Remove mix-blend-mode from child element
但是我的情况虽然非常接近，但有些不同(包括使用 flexbox 底部对齐包含文本的元素)，到目前为止，尽管多次尝试，我都未能破解这个问题。
谁能指出我正确的方向？谢谢!

Answer 1

确保混合背景和文本位于不同的堆叠上下文中，并且文本呈现在背景之上，而不是在其之下。
当前代码不起作用的原因是文本元素是设置 mix-blend-mode 的容器元素的子元素。 . mix-blend-mode将混合容器的所有内容，包括文本 - 没有转义。
你需要两件事来完成这项工作:

确保文本不是设置背景和混合模式的元素的子元素。

确保文本被渲染，因此不受设置背景和混合模式的元素的影响。

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

定义一个自动调整大小的网格区域

将背景和文本都放入该区域(使它们重叠)

让文本决定区域的大小

将背景拉伸(stretch)到由文本大小决定的区域大小

然后，设置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>