Firefox 的渐变蒙版

Question

我正在使用 -webkit-mask-image，属性值为 -webkit-gradient，它在 Chrome 和 Safari 中完美运行。我需要与 Firefox 相同类型的效果，我尝试使用 mask 但无法使用 gradient 实现。 Firefox 可以使用渐变蒙版吗？

JSFiddle

h1 {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(50%, rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 1)));
}

<h1>I'M A GRADIENT MASK!</h1>

Answer 1

你可以使用带有背景渐变的伪元素

h1 {
  position:relative;
  }
h1:before {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  content:'';  
  background:linear-gradient(to top, transparent ,rgba(255,255,255,0.8),transparent );
  pointer-events:none; /* make sure it doesn't come in the way */
}

<h1>AM I A GRADIENT MASK?!</h1>

Firefox 的渐变蒙版

Gradient mask for Firefox

html

css

firefox