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

Barbara Streisand
リリース: 2024-11-13 08:25:02
オリジナル
428 人が閲覧しました

Can You Have Dual-Color Text Without Content Duplication?

コンテンツを重複させずに 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート