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

是否有任何方法基於形狀輪廓（例如圓形或橢圓形曲線）通過CSS或腳本在部分文本上實現不同的顏色...僅使用CSS或JS。更改部分文本css或javascript的顏色

一個例子是這樣的，看到基於圖像上的S的U的顏色和部分的不同之處 - 的效果示例

即使世界一個類似的問題，但是這是在插畫 - https://graphicdesign.stackexchange.com/questions/20127/text-silhouette-change-color-in-middle-of-a-letter-illustrator

Instinct說沒辦法，但是可能會有一些魔法剪輯效果可以達到相同效果嗎？

來源

2017-07-07 Rob

這是可能的，但不容易。你可以使用SVG爲兩個元素（剪影和文本）的路徑，然後以某種方式剪輯它們以得到一個交叉路徑，然後可以着色。 –

你需要SVG和CSS來做到這一點...呃，對於堆棧溢出的答案太寬泛或太難了。 –

老實說，我認爲這不是一個壞問題，即使它不完全遵循SO的規則 –

有兩種或兩種以上的方法來做到這一點。我可以當場想出2個。

一個解決方案是使用SVG文本。如果你有很多地方或動態文本，我不能建議。動畫SVG文本有時候有點複雜。

你可以做的是使用混合混合模式的CSS。它允許混合文本和背景的顏色。你可以從Photoshop或Illustrator中瞭解它。

你可以在這裏閱讀更多關於CSS tricks。您可能不想檢查瀏覽器兼容性，因爲混合混合模式通常得不到支持。你可以在Caniuse這裏查看哪個瀏覽器可以使用它。

如果您需要解決方法或使用示例的靈感，您可以始終搜索codepen.io以獲取混合混合模式或類似的東西。

來源

2017-07-07 11:52:15

我比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>

來源

2017-07-07 11:58:55

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

回答

相關問題