[英]Materialize CSS Transparent Gradient Overlay on Card Image
我正在嘗試從Materialize CSS框架中將透明漸變疊加到圖像卡上。 我已經在網上找到的共識表明,這應該通過將可以輕松實現img
標記成一個div
和應用漸變背景說div
。 然后只需將img
標簽的z-index
移到漸變后面,即可將其覆蓋。
但是,我在使用這種方法時遇到了一些問題。 由於某種原因,我的疊加層上似乎沒有透明度,這意味着只能看到漸變,而看不到后面的圖像。 我認為這與物化框架有關,有什么辦法可以解決它?
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;
}
我想你誤會了。
您無法在HTML本身的包裝程序背景后面設置圖像。背景是背景。
您可以使用包裝器創建偽元素疊加層。
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.