以下代码段可完美地在Chrome上运行:背景图片逐渐淡入背景,逐渐向下方倾斜。
div {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(black, black, transparent);
mask-image: linear-gradient(black, black, transparent);
}
<div></div>
但是它在Firefox上不起作用,据说该值不正确。
为什么呢我该如何解决?
请注意,我知道如何使用另一个div作为覆盖,这对我来说不是一个通用的解决方案,因为它对内容和元素
position
造成了太多后果。我唯一感兴趣的答案是那些固定div背景的答案。 最佳答案
我不知道为什么,但是您可以通过使用:after
属性来复制效果,并且这种效果适用于所有浏览器-甚至我们的老 friend IE:
.container {
height: 200px;
overflow: hidden;
position: relative;
}
.image {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
}
.image:after {
content: '';
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA');
background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%);
display: block;
position: absolute;
pointer-event: none;
bottom: 0;
left: 0;
width: 200px;
height: 20%;
}
<div class="container">
<div class="image"></div>
</div>
关于css - 在Firefox上具有线性渐变的mask-image,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42528548/