CSS を使用してテキストフィールド内の単語に異なる色を使用する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-09-02 18:19:41

オリジナル

2452 人が閲覧しました

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

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

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

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

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

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

レンダリング

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

##コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    textarea {
	        font-size: 20px;
        background-image: linear-gradient(to right, red, blue);
        background-clip: text;
        -webkit-background-clip: text;
	        color: transparent; /*需要文字透明*/
    }
    </style>
</head>

<body>
	   <textarea>为你定制 发现精彩</textarea>
</body>
</html>

ログイン後にコピー

あまり多くのコードはありません。分析しましょう:

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

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

グラデーション効果は背景に適用されていますが、テキストに適用するにはどうすればよいですか?これには、background-clip 属性が使用されます。これは新しい属性であり、互換性の問題があるため、プレフィックスを付ける必要があります。

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

ログイン後にコピー

background-clip 属性は、背景の描画領域を指定します。
構文:
background -clip: border -box|padding-box|content-box;

上記では

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

text

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

CSS を使用してテキストフィールド内の単語に異なる色を使用する方法少しグラデーションがあることがわかりますが、それは明白ではありません。これは、テキスト自体にも色があり、色の付いたテキストが背景を覆うためです。したがって、最後に

color:parents;

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

CSS を使用してテキストフィールド内の単語に異なる色を使用する方法 (学習ビデオ共有:

Web フロントエンド

)

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