Heim > Artikel > Web-Frontend > So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

青灯夜游Original: 2022-09-02 18:19:132400Durchsuche

Implementierungsschritte: 1. Verwenden Sie linear-gradient(), um dem Textfeld einen Verlaufshintergrundeffekt hinzuzufügen, die Syntax „background-image: linear-gradient(...);“ 2. Verwenden Sie das Attribut „background-clip“. und Farbattribut, um den Farbverlauf zu erstellen. Die Hintergrundfarbe wird nur auf dem Text im Textfeld angezeigt, dh der Textverlauf hat unterschiedliche Farben. Die Syntax lautet „Hintergrundclip: Text; Farbe: transparent;“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie unterschiedliche Textfarben erzielen, indem Sie dem Text im Textfeld einen Verlaufseffekt hinzufügen.

css3-Textverlaufsfarbe: linear-gradient()+background-clip

Es gibt keine direkte Eigenschaft in CSS, um den Textverlauf festzulegen. Normalerweise kann Text nur eine Volltonfarbe haben. Sie können jedoch Hintergrundausschnitte verwenden, um die Hintergrundfarbe im Textbereich erscheinen zu lassen. Es sieht so aus, als hätte der Text einen Farbverlauf it Hier ist ein Blick:

background-image: linear-gradient(to right, red, blue); bedeutet, dass der Hintergrundbildwert eine Verlaufsfarbe ist. So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

Verlauf Der Effekt wird auf den Hintergrund angewendet. Wie kann ich ihn auf den Text anwenden? Dabei wird das Attribut „background-clip“ verwendet. Da es sich um ein neues Attribut handelt und Kompatibilitätsprobleme bestehen, muss ihm das Präfix So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

<!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>

das Attribut „background-clip“ gibt den Zeichenbereich des Hintergrunds anSyntax: background-clip: border-box|padding- box|content-box ;

So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

background-image: linear-gradient(to right, red, blue);是背景图取值为渐变色。

So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

渐变效果是作用在背景上的，怎么让该效果作用在文字上？这就使用到background-clip 属性。因为它是一个新属性，有兼容问题，因此要加前缀

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

background-clip 属性规定背景的绘制区域

语法：background-clip: border-box|padding-box|content-box;

上面没有说取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。

取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

可以看到，有一点点的渐变，但不明显；这是因为文字本身也有颜色，有颜色的文字会覆盖在背景之上。所以，我们最后写color: transparent;Es gibt keinen Wert Wenn Sie das oben erwähnte text sehen, sollten Sie auch denken, dass es Kompatibilitätsprobleme hat und derzeit nicht von allen Browsern unterstützt wird.

Der Wert von text bedeutet, dass der Text im Block als nach außen zu beschneidender Bereich verwendet wird. Der Hintergrund des Textes ist der Hintergrund des Blocks und der Bereich außerhalb des Textes beschnitten werden. So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

So verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden

Ja Wie Sie sehen können, gibt es einen leichten Farbverlauf, der jedoch nicht offensichtlich ist. Dies liegt daran, dass der Text selbst auch Farbe hat und der farbige Text den Hintergrund bedeckt. Deshalb schreiben wir schließlich color: transparent;, um den Text transparent zu machen, was bedeutet, dass die Hintergrundfarbe dahinter angezeigt wird.

🎜🎜🎜 (Lernvideo-Sharing: 🎜Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, damit die Wörter im Textfeld unterschiedliche Farben verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 padding border background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So ermitteln Sie, ob zwei Arrays doppelte Elemente in Javascript habenNächster Artikel：So ermitteln Sie, ob zwei Arrays doppelte Elemente in Javascript haben

In Verbindung stehende Artikel

Mehr sehen