コンテンツを重複させずに 2 色のテキストを使用できますか?

コンテンツを重複させずに 2 色のテキスト効果を実現する

反対側に異なる色のテキストを作成するという課題は、それが正しいかどうかという疑問を引き起こします。コンテンツを複製せずにこの効果を実現することは可能です。

背景のグラデーションとテキストクリッピング

解決策の 1 つは、CSS のbackground-clip:text プロパティを利用することです。背景に線形グラデーションを作成すると、2 つの色の間で滑らかに変化してテキストに色を付けることができます。これを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>

透明テキスト塗りつぶし

-webkit-text-fill-color: 透明;と色: 透明。プロパティを使用すると、テキストの色が透明になり、背景色が完全に表示されるようになります。

この方法では、コンテンツを複製する必要がなく、テキストの反対側に異なる色を付けることができます。この手法では、CSS のブレンド効果を利用して、視覚的に魅力的で動的なテキスト表示を作成します。

以上がコンテンツを重複させずに 2 色のテキストを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。