如何使用混合-混合-模式和隔离的CSS组合？
如何使用混合-混合-模式和隔离的CSS组合？
提问于 2018-04-13 06:10:51
我有一个红色背景的父元素。我想要一个h2元素将一些单词与背景混合，而另一些单词则在span标记中混合，不是。
我下面的例子不起作用。
如何让它工作？
.bg-red {
background: red;
}
.blend {
mix-blend-mode: difference;
color: white;
}
.isolate {
isolation: isolate;
}<div class="bg-red">
<div class="blend">
<h2>This text should <span class="isolate">(This one shouldn't)</span> be blended
</h2>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-04-13 07:56:33
为了使其正常工作，您需要在应用mix-blend-mode之前指定隔离。因此，在应用mix-blend-mode的背景和文本之间，需要有一个设置了isotlation的包装器。
这是一个在h2上应用背景的例子，里面有许多span。我们对它们应用mix-blend-mode，并在应用isolation的地方用另一个包装器包装不需要的包装器
h2 {
background: red;
}
h2 span {
mix-blend-mode: difference;
color: white;
}
.isolate {
isolation: isolate;
display: inline-block;
}<h2>
<span>This text should</span>
<div class="isolate"><span>(This one shouldn't)</span></div>
<span> be blended</span>
</h2>
但是，如果您在h2上应用mix-blend-mode，您将无法隔离其中的任何内容：
.red {
background: red;
}
h2 {
mix-blend-mode: difference;
}
h2 span {
color: white;
}
.isolate {
isolation: isolate;
display: inline-block;
}<div class="red">
<h2>
<span>This text should</span>
<div class="isolate"><span>(This one shouldn't)</span></div>
<span> be blended</span>
</h2>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49806627
复制相关文章
相似问题
腾讯云开发者
