CSS のグラデーション背景に基づいてテキストの色を動的に調整するにはどうすればよいですか?

背景色にブレンドしたテキスト

左側のさまざまな色で進行状況バーのスタイルを設定することを目的としています。テキストの色は、基礎となる背景に基づいて動的に調整する必要があります。

ミックスブレンドモードの試行

最初に実験したのはmix-blend-mode: テキストの色を背景とブレンドするための違いですが、失敗したことがわかりました。 filter: greyscale(1)contrast(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 中国語 Web サイトの他の関連記事を参照してください。