Hintergrund abdunkeln

[Alex S]

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.

Alex S.

 

[SpiceLab]

Dein Betreff Hintergrund abdunkeln via (CSS-)Forensuche führt zu Seite abdunkeln?.

 

[Alex S]

Dein Betreff Hintergrund abdunkeln via (CSS-)Forensuche führt zu Seite abdunkeln?.

Und was heißt das?

 

[SpiceLab]

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

 

[Alex S]

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.

 

[SpiceLab]

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

 

[Alex S]

die den Viewport in Breite und Höhe vollständig ausfüllt

Ja und wie macht man das?

Alex S.

 

[SpiceLab]

Steht alles im Code.

Hier nochmal daraus die relevanten CSS-Regeln:

* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#LoadMessage {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}