Durchscheinende Hintergründe für HTML-Text

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

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 folgende Abbildung):

<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 -->

HTML-Text (noch ohne Stildefinitionen) wird mit div-Element umgeben

Abbildung: Der HTML-Text (noch ohne Stildefinitionen) wird mit einem div-Element umgeben.

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: url(whitehouse.jpg);
 background-position: 0;
 background-repeat: no-repeat;
}

Danach können Sie die Schrift mit den gewünschten Stilen versehen (siehe nächste Abbildung):

h1 {
 margin: 0;
 padding: 0;
 font-family: Verdana, Arial, sans-serif
 margin-top: 325px;
 margin-left: 25px;

 /* Innenabstände ober- und unterhalb des Textes */
 padding-left: 25px;
 padding-bottom: 25px;

 /* das durchscheinende Hintergrundbild definieren */
 background-image: url(white-banner.png);
 background-position: bottom;
 background-repeat: no-repeat;
}
h1 span {
 font-size: .8em;
}

Überschrift wurde mit halbtransparentem Hintergrund hinterlegt und mit Stilen versehen

Abbildung: Die Überschrift wurde mit einem halbtransparenten Hintergrund hinterlegt und mit Stilen versehen.

Diskussion

Oftmals ist Text vor einem Hintergrundbild ohne zusätzliche Definitionen nicht sonderlich gut lesbar. Sie können einer Überschrift natürlich eine eigene Hintergrundfarbe zuweisen, die das Hintergrundbild dann allerdings komplett verdecken würde. Ein halbtransparenter Hintergrund für die Überschrift ist wesentlich eleganter.

Glücklicherweise ist es mit PNG-Dateien möglich, auch halbtransparente Bilder darzustellen. Da auch der Internet Explorer 7 in der Lage ist, korrekt mit PNG-Dateien umzugehen, steht diesem Verfahren nichts mehr im Wege. Der Trick besteht darin, für die Überschrift ein eigenes Hintergrundbild festzulegen (white-banner.png), das ähnlich wie eine Milchglasscheibe zwischen dem Seitenhintergrund und dem Text liegt, wie in unserer Abbildung gezeigt.

Siehe auch

Das Rezept HTML-Text durch ein Bild ersetzen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln