マテリアライズカードの透明なグラデーションオーバーレイ画像

Question

私は、マテリアライズCSSフレームワークのイメージカードに透明グラデーションをオーバーレイしようとしています。私がオンラインで見つけたコンセンサスは、imgタグをdivに置き、前記divに勾配バックグラウンドを適用することによって容易に達成されるべきであることを示唆している。次に、imgタグのz-indexをグラデーションの後ろに移動するだけでオーバーレイされます。

しかし、私はこのアプローチでいくつかの問題に取り組んでいます。何らかの理由で、オーバーレイに透明性がないように見えます。その意味は、グラデーションのみが背後の画像ではなく、見えるということです。私はそれがマテリアライズのフレームワークとは何かを前提にしていますが、私はそれを回避する方法がいくつかありますか？

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

私はあなたが誤解したと思います。

自分のラッパーの背後にあるHTMLでイメージを設定することはできませんbackground..backgroundは背景です。

ラッパーを使用して、擬似要素オーバーレイを作成できます。

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