ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS を使用してテキストフィールド内の単語に異なる色を使用する方法
CSS を使用してテキストフィールド内の単語に異なる色を使用する方法
- 青灯夜游オリジナル
- 2022-09-02 18:19:132453ブラウズ
実装手順: 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 にはテキスト グラデーションを設定する直接のプロパティはありません。通常、テキストは単色のみ可能です。ただし、背景クリッピングを使用して、テキスト領域に背景色を表示することができます。テキストにグラデーションがあるように見えます
レンダリング
##コード
<!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); は、グラデーション カラーとしての背景画像の値です。
background-clip: text; -webkit-background-clip: text;
background-clip 属性は、背景の描画領域を指定します。構文:上記ではbackground -clip: border -box|padding-box|content-box;
text## の値について言及していません。 #、前を参照してください。おそらくご想像のとおり、このプレフィックスには互換性の問題があり、現在すべてのブラウザーでサポートされているわけではありません。 は、
の値が、ブロック内のテキストが外側にトリミングされるトリミング領域として使用されることを意味します。テキストの背景はブロックの背景であり、テキストの背景はブロックの背景です。テキストの外側の領域は切り取られます。
少しグラデーションがあることがわかりますが、それは明白ではありません。これは、テキスト自体にも色があり、色の付いたテキストが背景を覆うためです。したがって、最後に
と記述してテキストを透明にします。これは、テキストの背後にある背景色が表示されることを意味します。
以上がCSS を使用してテキストフィールド内の単語に異なる色を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。