0 

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

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

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

1 回答 1

0

正如评论你梯度语法是错误的。如果您检查规范，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>

于 2019-12-24T19:24:17.137 回答