Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Beispiel dafür, wie CSS einen Textfarbverlauf implementiert

黄舟
Freigeben: 2017-11-01 10:32:01
Original
2792 Leute haben es durchsucht

Vorwort

Drei CSS--Attribute werden hauptsächlich verwendet :

  1. linear-gradient() zur Implementierung von Verlaufsbildern

  2. Hintergrundclip Gibt den Bereich an, in dem das Hintergrundbild des Objekts nach außen abgeschnitten wird

  3.  text-fill-color Geben Sie die Füllfarbe des Textes an

Beispiel

      background: linear-gradient(to bottom,#fff 0%,#333 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
Nach dem Login kopieren

Linear-gradient() kann den Verlaufswinkel und die Farbe angeben. Im Beispiel erfolgt die Farbtransformation von oben nach unten

Hintergrund. clip:text enthält Text. Die Form wird als Zuschneidebereich verwendet.

text-fill-color:transparent. Die Füllfarbe des Textes ist transparent.

Der Effekt ist wie folgt:

 

Kompatibilität

Sowohl Chrome als auch neuere Versionen von Firefox unterstützen die Eigenschaften „Hintergrundclip“ und „Textfüllfarbe“. und das -webkit- Präfix

ist erforderlich. IE unterstützt nicht den Textwert des Attributs „background-clip“

Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie CSS einen Textfarbverlauf implementiert. 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
Beliebte Tutorials
Mehr>
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!