クイックヒント：テキストにグラデーション効果とパターンを追加する方法

このクイックヒントは、Webページテキストへの勾配効果とパターンの簡単な追加を示しています。 これは、テキストを透明にし、background-imageを使用して背景の装飾を適用し、この装飾をbackground-clip。

透明なテキストと background-clip

効果は、テキストの色を透明に設定することから始まります。

見出しの場合、これは次のとおりです <h1></h1>

これだけでテキストが見えないようになります。 重要な次のステップは

<code class="language-css">h1 {
  color: transparent;
}</code>

です。これは、テキスト文字の背景を制限し、要素のボックス全体を埋めるのを防ぎます。

background-clip: textさて、背景効果はテキストに正確に切り取られます。

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
}</code>

バックグラウンドグラデーションの適用

見出しにグラデーションを適用しましょう：

これにより、見出し全体に左から右への勾配が作成されます。 色、方向を変え、パターン化された勾配を作成する多くのバリエーションが可能です。 ストライプパターンの場合：

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}</code>

より複雑なパターンとスタイリングも

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}</code>

を達成できます。

背景画像を使用して

text-stroke

グラデーションを超えて、

テキストに直接画像を適用できます。 繰り返しパターン画像を使用します（以下の画像と同様）：

background-image CSSは次のとおりです

テキスト内の適切な画像スケーリングを保証します。

。

でさらに強化を実現できます

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}</code>

vs.background-size: containshorthand filter: drop-shadow()shorthandを使用するには、

の前にbackground-imageの前に配置する必要があります。 backgroundブラウザのサポートとアクセシビリティ

background広くサポートされていますが、ベンダープレフィックス（）が古いブラウザーに必要になる場合があります。 アクセシビリティについては、を使用して、background-clipサポートを欠いているブラウザーにフォールバックスタイルを提供することを検討してください：background-clip

これらの効果を過度に使用すると、読みやすさを妨げる可能性があることを忘れないでください。 それらを控えめで思慮深く使用します。

結論

-webkit-background-clip @supportsこれらの手法は、微妙でありながら効果的なテキストの強化を提供します。 それらを慎重に使用して、読みやすさを犠牲にすることなく視覚的な関心を追加します。

以上がクイックヒント：テキストにグラデーション効果とパターンを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。