Css 渐变背景上的渐变消失文本

我试图在文本上实现效果，就像在图像上一样。如果背景用纯色填充，那么通过

css

获取此类文本就没有问题。但对于渐变背景，这不起作用。 试图将文本制作为图像，但结果是错误和虚假（文本必须是文本，而不是图像）

怎样才能达到这样的效果呢？

---

一种解决方案是使用CSS掩码

下面是一个例子：

HTML:

它使用Firefox支持的CSS。对于Chrome，它使用了

请参阅上的HTML5 Rocks文章

另一个选项是@amol建议的选项。如果像参考图像一样没有太多的文本行，可以将第一行的文本放置在with类“first-line”中，将第二行的文本放置在with类“SEXT-line”中，等等。然后，使用rgba（）逐渐淡出文本行：

rgba（）方法的优点是广泛的浏览器支持（Chrome、Firefox、Safari、InternetExplorer9+和Opera10+）：

---

你为什么不改变字体的颜色呢？每行的颜色是多少？它实用吗？看起来你想让一些文本不可读。为什么？@ralph.m这不是我的问题：）我需要这么做

<div id="box">
  <div id="box-content">
    <h1>Testing</h1>
    <h2>This is a test</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit, metus euismod aliquam pretium, magna ligula rhoncus justo, non feugiat erat lectus ut erat. Donec dictum, magna sit amet euismod commodo, enim erat euismod tellus, sit amet tincidunt est arcu convallis risus. Curabitur at nunc enim. Cras vitae laoreet sem. Morbi nec neque blandit, ullamcorper purus eget, pretium dolor. Phasellus viverra, felis eget porta blandit, nunc lorem hendrerit urna, et sollicitudin est velit eu risus. Suspendisse eget tellus bibendum, commodo velit at, volutpat ipsum. Mauris sollicitudin velit ut ligula hendrerit pulvinar. In pellentesque nisl sem, a hendrerit ipsum tincidunt eget. Ut convallis ultricies arcu, ac imperdiet urna ultrices eu. Etiam nisl orci, vulputate et varius quis, placerat sed enim. Proin vitae posuere mi, vel fringilla nibh. Donec nec risus non dolor faucibus ornare eget nec nisl. Cras suscipit, sapien ut blandit pretium, erat lectus tristique risus, faucibus aliquam urna ipsum sed diam.
  </div>
</div>

<svg width="0" height="0">
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
      <stop stop-color="white" offset="0.2"/>
      <stop stop-color="black" offset="1"/>
    </linearGradient>

    <mask id="gradientMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

#box {
    padding: 10px;
    width: 500px;
    height: 300px;
    background: -moz-linear-gradient(right, #37b8d4, #4d37d4);
    background: linear-gradient(to right, #37b8d4, #4d37d4);
    font-family: 'Helvetica', sans-serif;
    color: #fff;
    line-height: 150%;
}

#box-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0));
    mask: url(#gradientMask);
}