CSS Kochbuch

2.11 Bilder als Versalien

Problem

Für den Versal soll eine Grafik benutzt werden.

Lösung

Umgeben Sie den ersten Buchstaben des ersten Satzes eines Absatzes mit einem span-Element:

<p><span class="initcap">O</span>nline, activity of exchanging
ideas is sped up. The distribution of messages from the selling of
propaganda to the giving away of disinformation takes place at a
blindingly fast pace thanks to the state of technology &hellip;</p>

Legen Sie fest, dass der Inhalt des span-Elements nicht dargestellt werden soll:

span.initcap {
 display: none;
}

Schließlich definieren Sie ein Bild, das im Hintergrund des Absatzes dargestellt werden soll (siehe Abbildung 2-12):

p { line-height: 1em; background-image: url(initcap-o.gif); background-repeat: no-repeat; ...