コンテンツを複製せずに CSS で 2 色のテキストを作成する方法

CSS を使用した 2 色のテキスト

一方の面が特定の色と背景を持つテキスト効果を実現する方法について疑問が生じます。反対側には、コンテンツが重複せずに別の色と背景が表示されます。提供されている例では、inline-block で div を使用し、各 div の幅、背景色、オーバーフロー、高さを設定することによってこの効果を示しています。これらの div 内では、段落が 200% の幅と異なるテキストの色で定義されています。

ただし、このアプローチではコンテンツを複製する必要があります。これを回避するには、別の手法を使用できます。 Background-clip:text CSS プロパティが役に立ちます。このプロパティを使用すると、背景をレンダリングする領域を定義できます。この場合、テキスト自体に背景を適用する「テキスト」に設定できます。

このテクニックを使用すると、テキストのグラデーション背景を作成し、両側に異なる色の組み合わせを許可できます。 。次の CSS および HTML コードは、このアプローチを示しています:

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

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