Hintergrundfarbe eines Textes mit CSS festlegen

Eine Hintergrundfarbe für einen Text festzulegen, ist mit CSS sehr einfach möglich. Es gibt verschiedene Arten, die farbige Hinterlegung eines Textes zu bewerkstelligen. In diesem Artikel zeige ich dir, wie das funktioniert.

 

Feste Hintergrundfarbe

Mit nachstehendem Code kannst du eine feststehende Hintergrundfarbe für einen Text festlegen. Diese ist dann permanent sichtbar.

 

Code-Beispiel:

<p>Mit diesem CSS-Code kannst du einen <span style="background-color: yellow;">Highlight-Effekt</span> erzielen.</p>

 

Live-Anzeigebeispiel

Mit diesem CSS-Code kannst du einen Highlight-Effekt erzielen.

 

Hintergrundfarbe mit Mouseover wechseln

Das folgende Beispiel zeigt die Möglichkeit, die Hintergrundfarbe nur dann zu wechseln, wenn der Anwender mit seinem Mauszeiger über den markierten Text fährt. So lange der Mauszeiger über dem Text schwebt, ist dieser rot hinterlegt. Bewegt der Anwender den Mauszeiger vom Text herunter, wird er gräulich hinterlegt.

Das ganze funktioniert dabei mit dem CSS-Selektor :hover.

Probiere es auch im Live-Anzeigebeispiel aus.

 

Code-Beispiel (CSS):

.texthover {
background-color: lightgrey;
color: #000000;
}

.texthover:hover {
background-color: red;
color: white;
}

 

Code-Beispiel (HTML):

<p>Der Text wird nur dann rot unterlegt, wenn du <span class="texthover">hier mit dem Mauszeiger hinfährst</span>.</p>

 

Live-Anzeigebeispiel

Der Text wird nur dann rot unterlegt, wenn du hier mit dem Mauszeiger hinfährst.

 

Hinweis:

Wie du anhand der Code-Beispiele siehst, kannst du sowohl die Farben namentlich benennen (z.B. background-color: red; ), oder den sogenannten HTML Color Code (z.B. color: #000000; ) verwenden. Dies bleibt dir überlassen. Der Color-Code ist natürlich wesentlich genauer und kennt viel mehr Ausprägungen.

Übrigens: Nicht nur Texte lassen sich so mit einer Hintergrundfarbe belegen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.