-webkit-linear-gradient适用于Chrome和Safari，但不适用于Firefox

Question

以下html / css示例在Chrome / Firefox上正常运行，但看起来并不适合在Firefox上使用。

http://codepen.io/anatoly314/pen/MpZKeM

HTML ：

<div class="job-card-body">
    <div class="job-card-body-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a dolor urna. Morbi mattis enim diam, ut laoreet nunc maximus ac. Mauris faucibus orci vel sem vulputate euismod. Donec dui arcu, interdum ut mi vel, iaculis rutrum magna. Mauris et bibendum augue, quis consequat mauris. Duis sagittis, massa nec dapibus sodales, ipsum tortor porta risus, ac fringilla ipsum lorem non orci. Integer ullamcorper sodales quam, id tempor nulla ornare vel. Sed posuere lacus velit, ut facilisis justo luctus at. Donec felis metus, pharetra id dolor a, pretium convallis dolor. Nam vel lectus venenatis, porta purus vel, gravida nisi.

Vivamus finibus ac mauris vitae porttitor. Aliquam euismod est at mi pellentesque rutrum. Proin accumsan a risus in sagittis. Nullam congue felis eu volutpat dapibus. Curabitur porta ligula libero, vitae tempus est euismod in. Aliquam erat volutpat. Pellentesque at dui vel leo malesuada vehicula. Nullam justo purus, aliquet id diam vel, fermentum ornare est.

Pellentesque maximus imperdiet enim, nec viverra ipsum elementum sit amet. Nulla nisl magna, ultricies nec egestas sit amet, lobortis a ligula. Sed sollicitudin, est in varius molestie, mi odio tincidunt nisl, vel bibendum justo est vel tortor. Sed id consequat erat. Proin tincidunt semper tincidunt. Sed sagittis risus.
    </div>
    <div class="job-card-body-link">
      <a href="">Show More...</a>
    </div>
  </div>

CSS ：

* {
  box-sizing: border-box;
}

.job-card-body{
  padding: 10px;
  height: 30vw;
  width: 30vw;
  border: 1px solid #000000;
  border-radius: 10px;
}


.job-card-body{
  height: 50%;
  overflow: hidden;

}

.job-card-body-text{
    padding: 5px;
  height: 80%;
  background: -webkit-linear-gradient(top, black 0px, white);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.job-card-body-link{
  height: 20%;
  background-color: white;
  color: black !important;
  text-align: right;
}

看起来应该是：

但在Firefox上看这个：

P.S。这就是我想要完成的任务：http://codepen.io/anatoly314/pen/bqQxxJ/

Answer 1

如果您还需要支持IE / Edge，则无法使用此CSS规则，它非常具有实验性，IE / Edge和Firefox不支持＆lt; 49。

如果你有一个坚实的背景颜色，比如白色你可以试着通过在文本顶部使用透明渐变的容器来获得效果。

在此处试试：https://jsfiddle.net/z3japLqm/

B

Answer 2

您需要使用-mox-linear-gradient。我也为其他浏览器添加了一些。见例：

.class {
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}