Materialise CSS Transparente Farbverlaufsüberlagerung auf Karte Bild

Question

Ich versuche, eine transparente Grafik über das CSS-Framework von Materialize auf eine Bildkarte zu legen. Der Konsens, den ich online gefunden habe, legt nahe, dass dies leicht erreicht werden sollte, indem man das img-Tag in ein div setzt und einen Gradientenhintergrund auf dieses div anwendet. Dann bewegen Sie einfach das z-index des Tags img hinter den Farbverlauf und überlagern es damit.

Allerdings stoße ich auf einige Probleme mit diesem Ansatz. Aus irgendeinem Grund scheint es keine Transparenz auf meinem Overlay zu geben, was bedeutet, dass nur der Gradient sichtbar ist, nicht das Bild dahinter. Ich gehe davon aus, dass es etwas mit dem Materialisierungsrahmen zu tun hat, kann ich es irgendwie umgehen?

JSFiddle of my code

HTML:

<div class="row"> 
    <div class="col s12 m4 l3"> 
     <div class="card hoverable"> 
      <div class="card-image postergrad"> 
       <div class="postergrad"> 
        <img class="poster" src="http://vignette2.wikia.nocookie.net/horrormovies/images/e/e1/28-Days-Later-Posters.jpg"> 
       </div> 
       <span class="card-title">28 Days Later</span> 
      </div> 
      <div class="card-content"> 
       <p>Lorem ipsum...</p> 
      </div> 
      <div class="card-action"> 
       <a href="#">This is a link</a> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.postergrad { 
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 
} 

.poster { 
    position:relative; 
    z-index:-1; 
    display:block; 
} 

Answer 1

Ich glaube, Sie falsch verstanden haben.

Sie können ein Bild im HTML nicht hinter eigenen Wrappern background.background ist Hintergrund festlegen.

Sie können den Wrapper verwenden, um ein Pseudo-Element-Overlay zu erstellen.

.postergrad { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.postergrad::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
 
    /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
 
    /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); 
 
    /* IE6-9 */ 
 
} 
 
.poster { 
 
    display: block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col s12 m4 l3"> 
 
    <div class="card hoverable"> 
 
     <div class="card-image"> 
 
     <div class="postergrad"> 
 
      <img class="poster" src="http://vignette2.wikia.nocookie.net/horrormovies/images/e/e1/28-Days-Later-Posters.jpg"> 
 
     </div> 
 
     <span class="card-title">28 Days Later</span> 
 
     </div> 
 
     <div class="card-content"> 
 
     <p>Lorem ipsum...</p> 
 
     </div> 
 
     <div class="card-action"> 
 
     <a href="#">This is a link</a> 
 
     </div> 
 
    </div> 
 
    </div>