CSS を使用してテキストフィールド内の単語に異なる色を使用する方法

実装手順: 1. 「background-image:linear-gradient(...);」という構文で、linear-gradient() を使用して、テキスト フィールドにグラデーションの背景効果を追加します。 background-clip 属性と color 属性を使用すると、テキスト フィールド内のテキストにのみグラデーションの背景色を表示できます。つまり、テキストのグラデーションに異なる色が適用されます。構文は、「background-clip: text;color:transparent;」です。 」。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、テキスト フィールド内のテキストにグラデーション効果を追加することで、テキストのさまざまな色の実現が可能です。

css3 テキスト グラデーションの色: Linear-gradient() background-clip

CSS にはテキスト グラデーションを設定する直接のプロパティはありません。通常、テキストは単色のみ可能です。ただし、背景クリッピングを使用して、テキスト領域に背景色を表示することができます。テキストにグラデーションがあるように見えます

レンダリング

##コード

    
    




	   为你定制 发现精彩

background-image: Linear-gradient(右へ、赤、 blue); は、グラデーション カラーとしての背景画像の値です。

background-clip: text;
-webkit-background-clip: text;

background-clip 属性は、背景の描画領域を指定します。

構文:

background -clip: border -box|padding-box|content-box;

text## の値について言及していません。 #、前を参照してください。おそらくご想像のとおり、このプレフィックスには互換性の問題があり、現在すべてのブラウザーでサポートされているわけではありません。 は、

の値が、ブロック内のテキストが外側にトリミングされるトリミング領域として使用されることを意味します。テキストの背景はブロックの背景であり、テキストの背景はブロックの背景です。テキストの外側の領域は切り取られます。

少しグラデーションがあることがわかりますが、それは明白ではありません。これは、テキスト自体にも色があり、色の付いたテキストが背景を覆うためです。したがって、最後に

と記述してテキストを透明にします。これは、テキストの背後にある背景色が表示されることを意味します。

(学習ビデオ共有:

)

以上がCSS を使用してテキストフィールド内の単語に異なる色を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。