Wie man kleines Bild in Text einbaut

Question

Ich möchte ein Wort des Textes innerhalb einer Web site mit a) spezieller Schriftart und b) kleinem Bild "herum" das Wort hervorheben. Hier das Beispiel:

Was ist der beste Weg, dies zu realisieren? Damit es für verschiedene Browser/Fenstergrößen funktioniert?

Answer 1

Wickeln Sie dieses Wort in eine Spanne. Verwenden Sie ein Pseudoelement mit Hintergrundbild.

body { 
 
background: white; 
 
} 
 

 
h1 { 
 
    margin-top: 50px; 
 
} 
 

 
span { 
 
position: relative; 
 
} 
 

 
.background { 
 
    color: red; 
 
} 
 

 
.background:before { 
 
content:''; 
 
position: absolute; 
 
right: 0; 
 
top: -25px; 
 
width: 100%; 
 
height: 35px; 
 
background: url(http://redhatsociety.com/sites/all/themes/red_hat_society/images/funstuff/hearts.png) no-repeat right top; 
 
}

<h1> 
 
    Everyone is <span class="background"><span class="content">special</span></span> 
 
    </h1>