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

説明:
テキストを囲む #main 要素にグラデーションが適用されます.
 要素の背景には逆のグラデーションが適用され、テキストの背景として設定されます。 color.
background-clip:text プロパティは、背景のグラデーションをテキスト領域に制限します。
-webkit-text-fill-color:parent テキストが透明になり、背景が許可されます。 
このテクニックは、コンテンツを重複させることなく、2 色のテキスト効果を作成します。ブレンド効果を使用することで、追加のテキスト要素を必要とせずに、色間のシームレスな移行を実現します。