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. 
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
<!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 ;
background-image: linear-gradient(to right, red, blue);是背景图 取值为渐变色。
渐变效果是作用在背景上的，怎么让该效果作用在文字上？这就使用到background-clip 属性。因为它是一个新属性，有兼容问题，因此要加前缀
background-clip: text; -webkit-background-clip: text;
background-clip 属性 规定背景的绘制区域
语法：
background-clip: border-box|padding-box|content-box;
上面没有说取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。
取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
可以看到，有一点点的渐变，但不明显；这是因为文字本身也有颜色，有颜色的文字会覆盖在背景之上。所以，我们最后写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.
🎜🎜🎜 (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!
