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 中国語 Web サイトの他の関連記事を参照してください。