渐变背景上的梯度消失文本

Question

我正试图在图像上完成对文本的影响。如果背景填充了纯色，那么通过css获取此类文本没有问题。但是使用渐变背景这不起作用。 试图将文本作为图像，但结果是有点儿和虚拟（文本必须是文本，而不是图像）。

如何实现这种效果？

Answer 1

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

以下是一个示例：http://jsfiddle.net/qhLWA/

HTML：

<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>

CSS：

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

它使用Firefox中支持的CSS mask property。对于Chrome，它使用-webkit-mask-image property。

请参阅CSS Masking上的HTML5 Rocks文章。

另一个选项是@amol建议的选项。如果您没有像参考图像那样的很多文本行，则可以将第一行的文本放在＆lt; div＆gt;中。使用“第一行”类，＆lt; div＆gt;中的第二行文本然后，使用rgba（）逐渐淡出文本行：
。使用类“second-line”等。然后，使用rgba（）逐渐淡出文本行 http://jsfiddle.net/qhLWA/1/

rgba（）方法的优势在于广泛的浏览器支持（Chrome，Firefox，Safari，Internet Explorer 9+和Opera 10+）：
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value