CSS mask-image可能是您正在寻找的东西:

CSS mask-image is probably what you are looking for:

div {
  background: #333;
  padding: 1em;
}

p {
  color: white;
  font-weight: bold;
  -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  mask-image: linear-gradient(to bottom, white, transparent);
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget eros quis purus laoreet lobortis sit amet sit amet diam. Maecenas imperdiet nunc sed erat placerat, id ullamcorper mauris rhoncus. Phasellus non fringilla urna, eget elementum nulla.
  </p>
</div>

请务必检查浏览器兼容性(不幸的是，不是很好)

Be sure to check browser compatibility (not so great, unfortunately)