Firefox 上带有线性渐变的掩码图像答案

【问题标题】：mask-image with linear-gradient on FirefoxFirefox 上带有线性渐变的掩码图像
【发布时间】：2017-03-01 09:56:21
【问题描述】：

下面的 sn-p 在 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);
}

  &lt;div&gt;&lt;/div&gt;

但是在火狐上不行，据说值不正确。

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

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

【问题讨论】：

正如caniuse.com 所说，您无法在所有版本的 Firefox 中都避免使用 SVG。
部分问题是 Firefox 不是最新的...

标签： css firefox mask

【解决方案1】：

我不知道为什么，但是你可以通过使用 :after 属性来复制效果，这适用于所有浏览器——甚至我们的老朋友 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>

【讨论】：

这是我目前针对一些琐碎情况的解决方法，但这并不能真正复制，因为它还涵盖了所有内容（这意味着您必须使用一堆其他 div）
在 safari 中似乎不起作用，但在 chrome 和 firefox 中起作用。

【解决方案2】：

从 Firefox 53（2017 年 4 月 19 日发布）开始，现在已经可以支持遮罩图像了。

见http://caniuse.com/#search=mask

【讨论】：