用CSS實現雙色文本

初問：

如何實現不同顏色文本的效果每面顏色不重複內容？

常規方法：

一種常見的方法是創建兩個單獨的文本元素並將它們並排放置，每個元素都有其獨特的背景和前景色。

替代解決方案：

為了最大限度地減少內容重複，請考慮利用 CSS 屬性，例如 background-clip:text。此屬性可讓您將漸層套用至文字本身，從而實現以下功能：

CSS 實作：

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

HTML 結構：

說明：
漸變應用於#main 元素，其中包含文本.
 
 元素的背景應用了反向漸變，該背景被設定為文字的背景color.
background-clip:text 屬性限制背景漸變到文字區域。 
-webkit-text-fill-color:transparent 確保文字透明，允許背景漸層顯示。 
此技術無需重複內容即可創建雙色文字效果。透過使用混合效果，它可以實現顏色之間的無縫過渡，而不需要額外的文字元素。