Hintergrund abdunkeln

Alex S

Mitglied
Hallo User,

Ich habe folgendes Problem: Ich habe auf meiner Website eine Art Bildergalerie. Wenn man auf ein Bild klickt öffnet sich ein Div Container mit dem Bild und ein paar Kommentare. Jetzt möchte ich das sich der Hintergrund abdunkelt, wenn sich der Div Container öffnet.

Ich hoffe ihr könnt mir helfen. :D

Alex S.
 
Dass deine gesuchte CSS-Lösung hier im Forum schon existiert.

"Lightbox & Co" nutzen ebenso eine zunächst versteckte DIV-Ebene mit dunklem Hintergrund und schwacher Transparenz, die den Viewport in Breite und Höhe vollständig ausfüllt, sowie in der z-index-Ebene über dem Seiteninhalt liegt.

Diese wird dann per JavaScript analog zur Bildergalerie sichtbar/unsichtbar geschaltet.

Noch ein Tipp: statt position:absolute wählst du in dem CSS besser position:fixed ;-)
 
Zuletzt bearbeitet:
Danke
Daran habe ich auch schon gedacht, aber weist du auch wie man den Div über die ganze Seite bekommt?

Danke auch für deinen Tipp. Werde ihn bei Gelegenheit umsetzen ;)

Alex S.
 
aber weist du auch wie man den Div über die ganze Seite bekommt
Das erledigt der Quellcode aus dem genannten Beitrag. Siehe auch meine kurze Erläuterung incl. meinem nachgereichten Tipp, der bei scrollfähigen Seiteninhalt seine Wirkung zeigt:

eine [...] DIV-Ebene [...], die den Viewport in Breite und Höhe vollständig ausfüllt [...]

[...]

Noch ein Tipp: statt position:absolute wählst du in dem CSS besser position:fixed ;-)
 
Steht alles im Code.

Hier nochmal daraus die relevanten CSS-Regeln:
CSS:
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#LoadMessage {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
 
Zurück