-webkit-linear-gradient在Chrome和Safari上效果很好，但在Firefox上效果不佳

Question

The following html/css example works fine on Chrome/Firefox but doesn't look like it intended to be on 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;
}

It should looks like :

But looks on Firefox like this :

PS This is what I trying to accomplish: http://codepen.io/anatoly314/pen/bqQxxJ/

Answer 1

If you need to support IE/Edge too you can't use this CSS Rule, it's very experimental and not supported by IE/Edge and Firefox < 49.

If you have a solid background color, like white you could try to get the effect by using a container with a transparent gradient on top of the text.

Try it out here: https://jsfiddle.net/z3japLqm/

.content {
    max-height: 120px;
    position: relative;
    overflow: hidden;
}
.content .overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    text-align: center; 
    margin: 0; padding: 30px 0; 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

Answer 2

You'll need to use -mox-linear-gradient . I've included ones for other browsers as well. See example:

.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 */
}