mask-image和-webkit-mask-image在Firefox中不起作用

Question

.lighting {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;
opacity: 0.3;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
mix-blend-mode: screen;
pointer-events: none;
filter: blur(3px);
}

.sunMask {
position:absolute;
width:100%;
height:100%;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
z-index: 4;
mix-blend-mode: screen;
animation-name: sunFocus;
}

对于-web-web-mask-image和mask-image值，此代码在Firefox中不能更准确地工作。我还没有在互联网上找到解决这个问题的方法，所以我在这里问。在Firefox控制台中，您只能看到：

Error when processing values for "mask-image". Declaration abandoned. 
Error while processing values for "-webkit-mask-image". Declaration abandoned.

Answer 1

正如你所说的，渐变语法是错误的。如果你检查一下mask的规范，你会发现：

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

然后

 <mask-reference> = none | <image> | <mask-source>

然后

<image> = <url> | <gradient>

然后

<gradient> =
<linear-gradient()> | <repeating-linear-gradient()> |
<radial-gradient()> | <repeating-radial-gradient()>

最后

linear-gradient() = linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

示例：

​

.lighting {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-mask-image: linear-gradient(to left,transparent, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 60%,transparent);
  mask-image: linear-gradient(to left,transparent, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 60%,transparent);
  background:blue;
}

.sunMask {
  position: absolute;
  width: 100%;
  height: 100%;
 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
  background:green;
}

body {
  background:red;
  margin:0;
}

<div class="lighting">

</div>

<div class="sunMask">

</div>

​