CSS Kochbuch

3.9 Durchscheinende Hintergründe für HTML-Text

Problem

Sie wollen HTML-Text mit einem halbtransparenten Hintergrund hinterlegen.

Lösung

Definieren Sie das Bild als Hintergrund, und verwenden Sie dann die nötigen Stildefinitionen, um den Text entsprechend zu positionieren.

Zuerst umgeben Sie den Text mit einem div-Element, das mit einem id-Attribut versehen wurde (siehe Abbildung 3-14):

<div id="frame">
 <div id="banner">
  <h1>White House Confidential <br /><span>
Classified Lawn Care Secrets</span></h1>
 </div><!-- end #banner -->
 <p>...</p>
</div><!-- end #frame -->

Fügen Sie nun das Bild mittels der Eigenschaft background-image hinzu, und legen Sie die nötige Höhe und Breite fest:

#banner {
 width: 550px;
 height: 561px;
 overflow: hidden;
 background-image: ...