Text mit einem Farbverlauf oder einer Grafik “befüllen”

Text mit einem Farbverlauf oder einer Grafik “befüllen”

Überschriften müssen nicht langweilig sein. Ihr könnt diese mit einem Farbverlauf oder sogar einem eigenen Bild als “Schriftfarbe” definieren.

Definiert in der CSS-Klasse die Elemente background-image, background-clip und color.

<style>
.your-element {
    background-image: linear-gradient(90deg, blue, yellow);
    background-clip: text;
    color: transparent;
}
</style>

Statt einem Farbverlauf könnt Ihr die Eigenschaft background-image auch mit einem “richtigen” Bild befüllen. Bei diesem Hintergrundbild könnt ihr dann auch die Eigenschaften background-size, background-position etc. zuweisen.

<style>
.your-element {
    background-image: url("path/to/your/image.jpg");
    background-clip: text;
    color: transparent;
    background-position: center center;
    background-size: contain;
}
</style>

Im Video haben wir das alles nochmals ausführlich Schritt für Schritt beschrieben.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Blue Hippo Kompetenzen

Online Marketing

AdWords, Displaywerbung, Content Marketing, Newsletter. Wir helfen Dir das ganze Potential Deines Online Marketings zu erkennen und nutzen.

Mehr erfahren

Blue Hippo Technik

Technik

Ob Neuerstellung oder Pflege Deiner Website. Wir bieten individuelle und maßgeschneiderte Lösungen für Deine Anforderungen.

Mehr erfahren

Homepage Widget

Homepage Widget

"Entführe" die Postleitzahlensuche auf Deine Homepage und biete Deinen Besuchern einen echten Mehrwert. Kostenlos und ohne Registrierung.

Mehr erfahren

7-Tage
Inzidenz-Rechner
Covid-19 -
7-Tages Inzidenzwerte für Ihre PLZ