Hintergrund einer Website verdunkeln (Gray Out Effekt)

In diesem Tutorial zeige ich euch, wie man eine komplette Internetseite ausgegraut darstellen kann, was man auch als "Grey Out Effekt" bezeichnet. Benutzt werden kann dieser Effekt zum Beispiel um Bilder oder ähnliches im Vordergrund darzustellen während der gesamte Hintergrund etwas verdunkelt angezeigt wird.

Im folgenden möchten wir uns ansehen, welches CSS und welches HTML für diesen Effekt nötig ist, wie ihr CSS und HTML an eure Bedürfnisse anpassen könnt und wie ihr den Effekt mit JavaScript und jQuery dynamisch ein- und ausschalten könnt.

Das CSS

Wir verwenden folgendes CSS für alle modernen Browser:

#grayout {
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.5;
   z-index: 9999;
}

Wollen wir, dass das ganze auch in alten Versionen des Internet Explorers läuft, zum Beispiel in der Version 6, müssen wir noch folgende CSS-Regeln ergänzen:

#grayout {
   filter: alpha(opacity=50);
}

* html #grayout {
   position: absolute;
}

In neueren Versionen des Internet Explorers und im Edge-Browser funktioniert auch der CSS Code oben, während "filter" für die älteren Versionen nötig ist. Validiert man sein CSS allerdings, muss man beachten, dass "filter" nicht zum Standard gehört.

Wie dunkel wird der Hintergrund?

Wie dunkel der Hintergrund wird, kann man an der Stelle "opacity: 0.5" beziehungsweise "alpha(opacity=50)" anpassen. Diese Zahlen kann man zwischen 0 (unsichtbar) und 1 (vollständig sichtbar) beziehungsweise zwischen 0 und 100 so anpassen, wie man es haben möchte.

Das HTML

Zuletzt benötigen wir noch das HTML. Wir benötigen nur die folgende Zeile:

<div id="grayout" style="display: none;"></div>

An welcher Stelle man diese Zeile in sein HTML Dokument einfügt ist egal. Man kann die Zeile auch erst später mit jQuery hinzufügen. Das "display: none" sorgt dafür, dass der ausgegraute Bereich anfangs noch nicht sichtbar ist. Wenn man den Bereich sofort zeigen will, kann man das "display: none" natürlich auch weglassen.

Hintergrund dynamisch ausgrauen

Wenn wir jQuery benutzen, können wir den Hintergrund dynamisch ausgrauen und wieder einblenden lassen. Wir benutzen folgenden Link dazu:

<a href="#" onclick="$('#grayout').toggle(900); return false;">GrayOut</a>

Klickt man auf diesen Link "GrayOut" wird der verdunkelte Hintergrund der Seite entweder angezeigt oder ausgeblendet, je nachdem ob er gerade sichtbar ist oder nicht.

Elemente im Vordergrund anzeigen

Zuletzt stellt sich die Frage, wie wir einzelne Elemente (wie zum Beispiel einen DIV-Container) im Vordergrund, also vor dem ausgegrauten Hintergrund, anzeigen können.

Dazu ist die CSS-Eigenschaft "z-index" wichtig. Wir erzeugen den ausgegrauten Hintergrund, indem wir eine halbtransparente DIV-Box, die genauso groß ist wie unsere Seite (width und height stehen beide auf 100 %), über alle anderen Elemente auf unserer Seite legen, indem wir den "z-index" dieser Box höher setzen als den aller anderen Elemente (siehe der Abschnitt über das CSS).

Wenn wir nun ein Element noch vor dieser halbtransparenten DIV-Box erscheinen lassen möchten, müssen wir lediglich dafür sorgen dass dieser Box über CSS ein noch höherer z-index zugewiesen ist als der z-index des Hintergrunds. Für den Hintergrund verwenden wir in dem Beispiel einen z-index von 9999, wir könnten dem Element also einen z-index von 10000 geben um das zu erreichen.