[英]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.