Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich zweifarbigen Text, ohne den Inhalt zu duplizieren?

Wie erstelle ich zweifarbigen Text, ohne den Inhalt zu duplizieren?

Barbara Streisand
Freigeben: 2024-11-12 15:54:02
Original
420 Leute haben es durchsucht

How to Create Dual-Color Text Without Duplicating Content?

Zweifarbiger Text ohne Duplizierung

Das Duplizieren von Inhalten, um einen zweifarbigen Texteffekt zu erzielen, kann mühsam sein. Hier ist eine elegantere Lösung, die ausschließlich HTML und CSS verwendet:

Hintergrund-Clip verwenden

Durch die Nutzung der Eigenschaft „Hintergrundclip: Text“ können Sie den Text mit einem Farbverlauf einfärben , was eine enorme Flexibilität bei der Erstellung von Farbkombinationen bietet:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
Nach dem Login kopieren
<div>
Nach dem Login kopieren

Diese Technik macht duplizierten Inhalt überflüssig und ermöglicht gleichzeitig die Erstellung von atemberaubende und vielseitige zweifarbige Texteffekte.

Das obige ist der detaillierte Inhalt vonWie erstelle ich zweifarbigen Text, ohne den Inhalt zu duplizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage