コンテンツを複製せずに CSS を使用して 2 色のテキストを実現するにはどうすればよいでしょうか?

CSS を使用して 2 色のテキストを実現する

初期クエリ:

異なるテキストの効果を実現するにはどうすればよいですかコンテンツを複製せずに両側に色を付けますか?

従来のアプローチ:

一般的な方法では、2 つの別々のテキスト要素を作成し、それらを並べて配置します。固有の背景色と前景色。

代替解決策:

コンテンツの重複を最小限に抑えるには、background-clip:text などの CSS プロパティを活用することを検討してください。このプロパティを使用すると、テキスト自体にグラデーションを適用でき、次のことが可能になります:

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 構造:

<div>

説明:

• テキストを囲む #main 要素にグラデーションが適用されます。

• 要素の背景には反転したグラデーションが適用されており、テキストの背景色として設定されています。

• background-clip:text プロパティは、背景のグラデーションをテキスト領域に制限します。
• -webkit- text-fill-color:transparent では、テキストが透明になり、背景のグラデーションが透けて見えるようになります。

この手法では、コンテンツを重複させることなく、2 色のテキスト効果を作成します。ブレンド効果を使用することで、追加のテキスト要素を必要とせずに、色間のシームレスな移行を実現します。

以上がコンテンツを複製せずに CSS を使用して 2 色のテキストを実現するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。