Question

以下代码段完全适用于Chrome：背景图片淡入底部背后的背景。

＆＃13;

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);
}

＆＃13;

  <div></div>

＆＃13;

但它不适用于Firefox，据说价值不正确。

为什么？我该如何解决这个问题？

请注意，我知道如何使用另一个div作为叠加层，这对我来说不是一般解决方案，因为它对内容和元素position有太多影响。我感兴趣的唯一答案是修复div背景的答案。

Answer 1

我不知道为什么，但您可以使用:after属性来复制效果，这适用于所有浏览器 - 甚至我们的老朋友IE：

＆＃13;

.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%;
}

＆＃13;

<div class="container">
  <div class="image"></div>
</div>

＆＃13;

Answer 2

从Firefox 53（2017年4月19日发布）开始，现在可以完成对屏蔽图像的支持。

请参阅http://caniuse.com/#search=mask

在Firefox上使用线性渐变的mask-image

2 个答案: