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

不同背景下的文字顏色自適應

在追求進度條設計時，您尋求根據底層動態調整文字顏色背景色調。具體來說，您的目標是在淺色背景上顯示黑色/深灰色文本，在中等淺色背景上顯示黑色/深灰色文本，在深色背景上顯示白色文字。

使用混合混合模式和其他過濾器的初步嘗試事實證明未能達到您想要的效果。然而，一個可行的解決方案是在不依賴混合模式的情況下使用額外的漸變進行文字著色。

增強的CSS 樣式

實作以下CSS 程式碼來實現您想要的文字顏色適應：

.container {
  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;
}

HTML

在.container 元素內，將文字內容包裹在.text 元素中：

<div class="container">
  <div class="text">Some text here</div>
</div>

說明

.text 中的附加漸變建立從白色到黑色的漸變，並將透明顏色設定為文字填滿。這允許底層背景與文字混合，從而產生所需的顏色適應效果。

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