是否可以通过混合混合模式实现这一点

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;
}

下面是一个结果：

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

但我需要文本保持白色，而不是"白色"；剪切"；。

我试着在这里关注Rashad的回应：

从子元素中删除混合混合模式

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

有人能给我指正确的方向吗？谢谢

Answer 1

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

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

你需要两件事才能做到这一点：

1. 确保文本不是设置背景和混合模式的元素的子元素
2. 确保文本被渲染到设置背景和混合模式的元素上，从而不受其影响

挑战在于背景的大小必须取决于内容的大小。一种方法是使用CSS网格布局：

• 定义一个自动调整大小的网格区域
• 将背景和文本放在同一个区域(使它们重叠(
• 让文本决定区域的大小
• 将背景拉伸到由文本大小决定的区域大小

然后，在text元素上设置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>