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

Question

有没有办法通过CSS或脚本在文本的一部分上实现不同的颜色，基于形状轮廓，例如圆形或椭圆形曲线...仅限CSS或JS。

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

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

本能说没办法，但可能会有一些神奇的剪辑效果可以达到同样的效果吗？

Answer 1

有两种或更多种方法可以做到这一点。我当场可以拿出2个。

一种解决方案是使用SVG文本。如果你有很多地方或动态文字我不能建议。动画SVG文本有时会有点复杂。

你可以做的是使用mix-blend-mode css。它允许混合文本和背景的颜色。您可以从Photoshop或Illustrator中了解它。

您可以在CSS tricks上阅读更多相关信息。您可能无法检查浏览器兼容性，因为混合混合模式通常不太受支持。您可以在Caniuse上查看哪个浏览器可以使用它。

如果您需要解决方法或使用示例的灵感，您可以随时搜索codepen.io以获得混合混合模式或类似的东西。

Answer 2

我比EmilØstervig慢一点，但我想写相同:-)我为混合混合模式属性创建了一个小例子，它在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>