Hintergrundfarbe eines Textes mit CSS ändern

Eine Hintergrundfarbe für einen Text festzulegen, ist mit CSS sehr einfach möglich. Es gibt dabei auch verschiedene Arten, wie du einen Text mit einer Farbe hinterlegen kannst. Somit werden nette Highlight-Effekte möglich.

Wie du die Farbe eines Textes ändern kannst, zeige ich dir schließlich in diesem Artikel.

 

Feste Hintergrundfarbe

Mit dem folgenden CSS Snippet kannst du eine feste Hintergrundfarbe für einen Text festlegen. Die Farbe ist dabei dann permanent sichtbar.

 

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 dabei eine andere Möglichkeit. Hiermit kannst du die Farbe nur dann wechseln, wenn der Nutzer mit der Maus über den markierten Text fährt. So lange der Mauszeiger über dem Text schwebt, ist dieser bspw. rot hinterlegt. Bewegt der Anwender den Mauszeiger schließlich vom Text weg, verschwindet die Hintergrundfarbe.

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

Probiere es auch im Live Anzeigebeispiel aus.

 

Beispiel (CSS):

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

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

 

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

Dieser Text wird nur dann rot unterlegt, wenn du die Maus hier hin bewegst.

 

Hinweis:

Wie du bereits anhand der 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. Das bleibt dabei dir überlassen. Der Color Code ist natürlich wesentlich genauer und kennt viel mehr Abstufungen.

Übrigens: Nicht nur Texte lassen sich so mit einer Hintergrundfarbe belegen. Du kannst dabei den Hover-Effekt mit CSS auch für andere Elemente deiner Website erzielen.

 

Alternative

Manchmal reicht es auch aus, einen Text zu unterstreichen anstelle ihn komplett einzufärben. Das kannst du mit CSS ebenso spielend leicht nutzen. Einen Text zu unterstreichen ist dabei weniger auffällig als der hier vorgestellte Hover-Effekt.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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