Wie verwende ich CSS3-Verläufe, um Textfarbverläufe zu erzielen?

Ich habe das Gefühl, dass es im aktuellen Webdesign immer mehr Designs gibt, die Farbverläufe enthalten. Dieses Mal stellen wir vor, wie man CSS3-Verläufe auf Text anwendet und wie man Bilder in Text füllt.

Farbverlauf auf Text anwenden

Dies ist eine Verlaufsfarbe, die als Hintergrundfarbe des Textes festgelegt wird. Derzeit unterstützte Browser sind Google Chrome, Safari und Opera. (Empfohlener Kurs: CSS3-Video-Tutorial)

HTML

<h1>你好，PHP中文网</h1>

HTML listet den Text, der einen Farbverlauf haben soll, unverändert auf.

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Der Effekt ist wie folgt:

Sie können die Position der Farbe auch ändern, indem Sie den Winkel angeben Farbverlauf, um die Textur etwas rau zu machen.

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Der Effekt ist wie folgt:

Verwenden Sie ein Bild, um die Farbe des zu füllen Text

Zusätzlich zum Festlegen der Verlaufsfarbe als Hintergrundfarbe können Sie auch ein Bild verwenden, um die Schriftfarbe festzulegen.

Lassen Sie uns dieses Bild verwenden, um die Farbe für den Hintergrund festzulegen

Der Code lautet wie folgt:

	
	


<h1>你好，PHP中文网</h1>

Der Effekt lautet wie folgt:

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS3-Verläufe, um Textfarbverläufe zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!