javascript - 更改部分文本的颜色 css 或 javascript

Question

是否有任何方法可以通过 css 或脚本根据形状轮廓(例如圆形或椭圆形曲线)在部分文本上实现不同的颜色...仅使用 CSS 或 JS。

这是一个例子，看看 S 和 U 的一部分的颜色如何根据图像不同？- 效果示例

有一个类似的问题，但这是在 illustrator 中 - https://graphicdesign.stackexchange.com/questions/20127/text-silhouette-change-color-in-middle-of-a-letter-illustrator

本能地说不可能，但是否有一些神奇的剪辑效果可以达到同样的效果？

Answer 1

我比 Emil Østervig 慢一点，但我想写同样的 :-) 我为 mix 混合模式属性创建了一个小示例，它在 IE 和 Edge 中不起作用。我不认为你可以用纯 CSS 完全重新创建你的图像，但它是一个有趣的选择，可以更深入地挖掘。

.image {
  background: url(http://www.iconsdb.com/icons/preview/red/wolf-xxl.png);
  background-repeat: no-repeat;
}

.inverted {
  background-repeat: no-repeat;
  color: blue;
  width: 50%;
  height: 256px;
  mix-blend-mode: screen;
  font-size: 64px;
}

<div class="image">
  <div class="inverted">
    Wolf <br>
    Wolf <br>
    Wolf
  </div>
</div>