更改部分文字CSS或JavaScript的颜色

Question

是否有任何方法可以通过css或脚本基于形状轮廓（例如，圆形或椭圆形曲线）通过CSS或脚本在文本的一部分上实现不同的颜色……仅使用CSS或JS。

这是一个例子，看看图像中S和U的颜色有何不同？-效果示例

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

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

Answer 1

我比EmilØstervig慢一点，但我想写同样的东西:-)我为混合混合模式属性创建了一个小示例，该示例在IE和Edge中不起作用。 我不认为您可以使用纯CSS精确地重新创建Image，但这是一个可能更深层次的有趣选择。

 .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> 

Answer 2

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

一种解决方案是使用SVG文本。 如果您有很多地方或动态文字，我无法告知。 设置SVG文本动画有时会有些复杂。

相反，您可以使用混合混合模式CSS。 它允许混合文本和背景的颜色。 您可能会从Photoshop或Illustrator中了解它的种类。

您可以在CSS技巧上阅读更多有关它的信息。 您可能不希望检查浏览器的兼容性，因为一般而言，对mix-blend-mode的支持很差。 您可以在Caniuse上查看哪种浏览器可以使用它。

如果您需要变通方法或用法示例的启发，则可以始终在codepen.io中搜索mix-blend-mode或类似内容。