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中更准确地工作。我尚未在Internet上找到此问题的解决方案，因此我在这里提出。在Firefox控制台中，您只能看到：

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

Answer 1

如前所述，渐变语法是错误的。如果查看mask的规格，则会发现以下内容：

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