Question

我正在使用-webkit-mask-image，其属性值为-webkit-gradient，可在Chrome和Safari中完美运行。我需要为Firefox提供相同类型的效果，我尝试使用mask但无法使用gradient实现此效果。是否可以在Firefox中使用渐变掩码？

JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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的渐变蒙版

1 个答案: