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;
}
/*Arrow right*/
.mfp-arrow-right .mfp-a, .mfp-arrow-right:after {
content: “24” !important;
}
/*Arrow left*/
.mfp-arrow-left .mfp-a, .mfp-arrow-left:after {
content: “23” !important;
}
/*pagination*/
.mfp-counter {
display: none;
}
/*Close*/
.mfp-close, .mfp-image-holder .mfp-close {
opacity: .0;
}
/*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).