1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Hintergrund abdunkeln

Dieses Thema im Forum "CSS" wurde erstellt von Alex S, 9. Mai 2012.

  1. Alex S

    Alex S Grünschnabel

    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.
  2. SpiceLab

    SpiceLab ZENmechanic

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

    Alex S Grünschnabel

    Und was heißt das?
  4. SpiceLab

    SpiceLab ZENmechanic

    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: 9. Mai 2012
  5. Alex S

    Alex S Grünschnabel

    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.
  6. SpiceLab

    SpiceLab ZENmechanic

    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:

  7. Alex S

    Alex S Grünschnabel

    Ja und wie macht man das?

    Alex S.
  8. SpiceLab

    SpiceLab ZENmechanic

    Steht alles im Code.

    Hier nochmal daraus die relevanten CSS-Regeln:
    Code (CSS):
    1.  
    2. * {
    3. margin:0;
    4. padding:0;
    5. }
    6. html,body {
    7. height:100%;
    8. }
    9. #LoadMessage {
    10. position:fixed;
    11. top:0;
    12. left:0;
    13. width:100%;
    14. height:100%;
    15. }

Diese Seite empfehlen