css - 渐变背景上渐变消失的文字

我正在尝试实现像图像一样的文本效果。如果背景是纯色填充的，那么通过css获取这种文字是没有问题的。但是对于渐变背景，这是行不通的。试图将文本制作成图像，但结果是错误的和虚拟的(文本必须是文本，而不是图像)。

这种效果是怎么实现的呢？ enter image description here

最佳答案

一种解决方案是使用 CSS mask 。

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

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

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

另一种选择是@amol 建议的。如果你没有像引用图像那样的很多行文本，你可以将第一行的文本放在类为“first-line”的

中，将第二行的文本放在类为“second-”的

中行”等。然后，使用 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

关于css - 渐变背景上渐变消失的文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24975501/