CSS中如何根據漸層背景動態調整文字顏色？

背景顏色上的文字混合

您的目標是使用不同的左側顏色設計進度條，並且文字的顏色應根據底層背景動態調整。

混合混合模式嘗試

您最初嘗試了混合混合模式：嘗試將文字顏色與背景混合，但事實證明不成功。你也考慮過使用濾鏡：grayscale(1)對比(9);，但這也沒有達到預期的效果。

漸變解決方案

有效的解決方案在於創建一個額外的漸變為文字著色。透過採用此方法，您無需混合混合模式。

自訂CSS 程式碼實現了此漸變覆蓋：

.container {
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

此方法可確保文字顏色在黑色(在較暗的左側部分）和白色（在較亮的左側部分）。

以上是CSS中如何根據漸層背景動態調整文字顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！