So legen Sie den Schriftfarbverlauf in CSS fest

藏色散人
Freigeben: 2023-01-06 11:12:51
Original
48953 Leute haben es durchsucht

So legen Sie den Schriftfarbverlauf in CSS fest: 1. Verwenden Sie „background-cli“ und „text-fill-color“, um den Schriftfarbverlauf festzulegen. 2. Verwenden Sie „mask-image“, um den Schriftfarbverlauf festzulegen „linearGradient, fill“ legt den Schriftfarbverlauf fest.

So legen Sie den Schriftfarbverlauf in CSS fest

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, DELL G3-Computer

Drei Methoden zum Erzielen eines Textfarbverlaufs in CSS

UI-Designer im Prozess der Web-Front-End-Entwicklung Entwerfen Sie häufig einige Farbverläufe. Für Textdesignzeichnungen konnten wir in der Vergangenheit nur PNG-Bilder verwenden, um Text zu ersetzen. Heute können wir reines CSS verwenden, um Farbverlaufstexte zu realisieren. Hier sind 3 Implementierungsmethoden als Referenz!

Grundlegender Stil:

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
Nach dem Login kopieren

Die erste Methode: Verwenden Sie Hintergrund-Cli, Textfüllfarbe:

.gradient-text-one{ background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
Nach dem Login kopieren

Anweisungen:

Hintergrund: -webkit-linear-gradient(…) für Textelemente. Bietet Hintergrund mit Farbverlauf.

webkit-text-fill-color: transparent Füllen Sie Text mit transparenter Farbe.

Webkit-Hintergrundclip: Text schneidet den Hintergrund mit Text aus und füllt den Text mit dem Verlaufshintergrund als Farbe.

Zweite Methode, mask-image verwenden:

.gradient-text-two{ color:red; } .gradient-text-two[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:yellow; left:0; top:0; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); }
Nach dem Login kopieren

Erklärung:

mask-image ist dasselbe wie Hintergrundbild. Es kann nicht nur den Bildpfad, sondern auch die Verlaufsfarbe annehmen.

Die dritte Methode, linearGradient verwenden, füllen:

.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; }         花信年华 
Nach dem Login kopieren

Erklärung:

In SVG gibt es zwei Haupttypen von Farbverläufen
:
Linearer Farbverlauf (linearGradient)

Radialer Farbverlauf (radialGradient)

Farbverlauf in SVG kann nicht nur zum Füllen von grafischen Elementen, sondern auch von Textelementen verwendet werden

Das obige ist der detaillierte Inhalt vonSo legen Sie den Schriftfarbverlauf in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!