div末尾逐步透明的文本

Question

我在描述文本here的末尾看到了一个简洁的效果，其中文本的最后一行逐渐变得透明，我很好奇它是如何完成的。

关于这个主题有一个discussion但是我没有让jsFiddle像预期的那样工作，其他很多回复似乎都错过了OP的意图。

可行吗？如果是这样，没有供应商前缀是否可行？

Answer 1

他们使用CSS3背景渐变进行操作但您可以使用图像实现相同的效果。只需要一点png图像就可以解决你的问题。

Answer 2

是的，您可以这样做，并且没有供应商前缀： 在文本区域放置div。在此div class="fadeout">中，您放置了一个渐变为白色渐变的图像，该图像顶部是透明的，底部只有白色（或页面的背景颜色）。基础文本区域中的文本看起来就像淡出一样。

图像可以用CSS-Gradient替换：

.fadeout {
    background-image: 
      -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}

但是这有特定于供应商的前缀。