Overlay-Grenze funktioniert aber Hintergrundfarbe nicht

Ich arbeite an einem Overlay für meine Galerie-Elemente, wenn ich überprüfe, ob das Targeting mit rotem Rand richtig ist, funktioniert es, aber wenn ich einen Schritt weiter gehen und ein hinzufügen möchte Hintergrundfarbe dazu tut es trotz Z-Index nicht. Was habe ich hier falsch gemacht? Clearfix macht keinen Unterschied. Overlay-Grenze funktioniert aber Hintergrundfarbe nicht

.gallery { 
 
    margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
    padding:0px; 
 
    border:1px solid white; 
 
    z-index:101; 
 
    position:relative; 
 
} 
 

 
.gallery-item img { 
 
    position:relative; 
 
    width:100%; 
 
    z-index:101; 
 
} 
 

 
.gallery-overlay { 
 
    border:1px solid red; 
 
    background-color:rgba(255,255,255,.1); 
 
    position:relative; 
 
    width:100%; 
 
    z-index:102; 
 
} 
 

 
.gallery-caption { 
 
    height:50px; 
 
    display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
    </div> 
 
    <!-- new row starts --> 
 
    <div class="row"> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2016-05-15 sklrboy

Ihr Problem ist, dass die Hintergrundfarbe funktioniert, aber es durch seinen Inhalt abgedeckt wird, die in diesem Fall das Bild.

Wenn der Effekt eine transluzente Farbwaschung über dem Bild erzeugen soll, löschen Sie Ihre Z-Indizes und fügen Sie nur eine z-index: -1 zum Bild selbst hinzu. Auf diese Weise wird es sich hinter der Hintergrundfarbe der Eltern verstecken.

Werfen Sie einen Blick auf den Code. Ich habe alle Z-Indizes entnommen und modifiziert/addierten die folgenden (und änderte die Hintergrundfarbe von weiß bis blaugrün und seine Opazität von 0,1 bis 0,5, um es stärker ausgeprägt):

.gallery-overlay { 
    border:1px solid red; 
    background-color:rgba(0,255,255,.5); 
    position:relative; 
    width:100%; 
} 
.gallery-overlay img { 
    z-index: -1; 
}

.gallery { 
 
\t margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
\t padding:0px; 
 
\t border:1px solid white; 
 
\t z-index:101; 
 
\t position:relative; 
 
} 
 

 
.gallery-item img { 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.gallery-overlay { 
 
\t border:1px solid red; 
 
\t background-color:rgba(0,255,255,.5); 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.gallery-overlay img { 
 
    z-index: -1; 
 
} 
 

 
.gallery-caption { 
 
\t height:50px; 
 
\t display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <!-- new row starts --> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Quelle

2016-05-15 19:54:58 haltersweb

.gallery-item img {Position: relativ; Breite: 100%; z-index: -1;} Habe gerade versucht mit den anderen z-indexes gelöscht, aber immer noch nichts. – sklrboy

@sklrboy Schau dir meine Änderungen an dem obigen Post an. – haltersweb

Danke, so funktioniert es! :) – sklrboy

Haben Sie background-color mit nur Hintergrund zu ersetzen versucht?

So:

.gallery-overlay { 
    border:1px solid red; 
    background:rgba(255,255,255,.1); 
    position:relative; 
    width:100%; 
    z-index:102; 
}

Quelle

2016-05-15 19:38:24 Michael

Ja, aber ohne leider Ergebnis. – sklrboy

Versuchen Sie dies: .gallery-overlay {\t Grenze: 1px fest rot; \t Hintergrundbild: rgba (255,255,255, .1); \t Position: relativ; \t Breite: 100%; \t Z-Index: 102; } – Michael

Typ auf Hintergrund-Imager sollte Hintergrundbild sein – Michael

Warum Sie opacity nicht stattdessen durch die background-color für gallery-overlay-rgba(255,255,255,1) Ändern und Hinzufügen von opacity: 0.1-gallery-item img welche genau die gleiche visuelle Ergebnis produzieren wird.

Überprüfen Sie den Code Snippet unten:

.gallery { 
 
\t margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
\t padding:0px; 
 
\t border:1px solid white; 
 
\t z-index:101; 
 
\t position:relative; 
 
} 
 

 
.gallery-item img { 
 
    position:relative; 
 
    width:100%; 
 
    z-index:101; 
 
    opacity: 0.1; 
 
} 
 

 
.gallery-overlay { 
 
\t border:1px solid red; 
 
\t background-color:rgba(255,255,255,1); 
 
\t position:relative; 
 
\t width:100%; 
 
\t z-index:102; 
 
} 
 

 
.gallery-caption { 
 
\t height:50px; 
 
\t display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <!-- new row starts --> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Quelle

2016-05-15 20:02:14

würde ich, aber die Hintergrundfarbe funktioniert überhaupt nicht, also immer noch sinnlos. – sklrboy

Es funktioniert, aber Sie gaben ihm eine Opaity von 0,1 auf dem Hintergrund und nicht auf dem Bild. Ich habe die Eigenschaften umgekehrt, indem ich dem bg keine Opazität hinzugefügt habe, sondern eher dem Bild und es funktioniert gut. Führen Sie das Code-Snippet oben aus und Sie werden sehen, was ich meine. –

Aber das ist nur eine schnelle Lösung, es funktioniert gut. Danke vielmals! :) – sklrboy

Overlay-Grenze funktioniert aber Hintergrundfarbe nicht

Antwort

Verwandte Themen