コンテンツを複製せずに 2 色のテキストを作成するにはどうすればよいですか?

重複のない 2 色のテキスト

2 色のテキスト効果を実現するためにコンテンツを複製するのは面倒な場合があります。ここでは純粋に HTML と CSS を使用したより洗練されたソリューションを示します。

Background-Clip の使用

background-clip: text プロパティを利用すると、グラデーションでテキストに色を付けることができます。 、色の組み合わせを作成する際に非常に柔軟な対応が可能です。

#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;
}

<div>

このテクニックにより、コンテンツを重複させる必要がなくなり、魅力的で多用途な 2 色のテキスト効果を作成できるようになります。

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