CSS 中单个字母的混合模式

Question

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

谢谢

尝试将 '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 的目标是拆分单词并为每个字母分别设置混合模式的样式属性。请不要忘记检查回答

CSS 中单个字母的混合模式

Blending mode for individual letters within a word in CSS

html

css

blending

color-blending