我有一个带有红色背景的父元素。我想要一个 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>
在 JSFiddle 上查看
为了使其正常工作，您需要指定隔离before应用mix-blend-mode。所以在背景和你要申请的地方的文字之间mix-blend-mode你需要有一个包装纸isolation is set.
这是一个将背景应用于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>
但如果你申请mix-blend-mode在 h2 上，您将无法隔离其任何内容：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
