CSS 中单个字母的混合模式

Question

我想知道是否可以将混合模式应用于单个字母以查看它们如何与负字母间距重叠。 据我了解，它将整个文本字符串视为一个 object 并且不对其中的字形应用混合。 也许有一种聪明的方法可以在不将文本分成单独的单个字母字符串的情况下实现这种效果？

谢谢

尝试将“mix-blend-mode: multiply”和“background-blend-mode: multiply”应用于 class 但单个字母仍然不重叠...

Answer 1

您可以通过对字体使用rgba颜色来近似此

 .blended-text { color: rgba(0, 50, 0, 70%); font: 21em sans-serif; letter-spacing: -70px; }

 <span class="blended-text">Blend</span>

Answer 2

实际上你需要 JS 的一些帮助才能准确地实现你的目标。 请检查这个

 const element = document.getElementsByClassName("blend"); let text = element[0].getAttribute("data"); let blendMode = element[0].getAttribute("blend-mode"); for(let chr of text) element[0].innerHTML += "<span style='mix-blend-mode: "+blendMode+"' >"+chr+"</span>";

 .blend-style { letter-spacing: -35px; font-size:180px; font-weight:bold; color:rgba(22, 160, 133, 1); font-family:arial }

 <p class="blend blend-style" blend-mode="difference" data="BlendMe!"></p>

JS 的目标是拆分单词并分别为每个字母设置混合模式的样式属性。 请不要忘记检查答案