Hintergrundfarbe und Transparenz der Lightbox ändern

Du möchtest, dass deine Bilder in der Lightbox-Ansicht vor einer bestimmten Hintergrundfarbe dargestellt werden?

Hier zeige ich dir, wie du die Farbe festlegen kannst.

Kopiere dir den Code

/*background color*/
.mfp-bg {
background: grey !important;
opacity: 1 !important;
}
.mfp-arrow-right .mfp-a, .mfp-arrow-right:after {
content: “24” !important;
}
.mfp-arrow-left .mfp-a, .mfp-arrow-left:after {
content: “23” !important;
}

/*pngs without background in lightbox*/
.mfp-figure::after {
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}

Füge die Farbe ein, die der Hintergrund haben soll

Du kannst das "grey" einfach durch eine beliebige Farbe ersetzen.

zB.:

.mfp-bg{
background:rgba(255,255,255,0.9) !important;
}

oder

.mfp-bg {
background: rgba(0,0,0,.8) !important;
}

oder

.mfp-bg {
background: #ffffff !important;
}

Die Transparenz stellst du unter opacity ein:

1 = 100% opacity (keine Transparenz)
0.5 = 50% transparent
0.25 = 25% transparent
0.0 = vollkommen transparent

 

 

Falls die Titel nicht angezeigt werden sollen, copy-paste auch folgenden Code

/*no image titles in lightbox*/
.mfp-title {
display: none!important;
}

Code einfügen

Füge den Code auf deiner Seite ein. Gehe dazu im Dashboard auf Divi in die Theme-Optionen und füge den Code in das Feld Eigene CSS ein (ganz unten).

FERTIG!