如何应用淡出渐变的文本不透明度？

Question

我有一个带滚动内容的容器（白色文字，黑色背景）。

就像可以应用fading out opacity to the background of a div一样，我想将不透明度仅应用于容器中文本的底部，这样当您向下滚动时，文本看起来就像淡出一样。

通常，您将不透明度应用于文本，如下所示：

color: rgba(255,255,255,0.8);

如何为此添加渐变，即从容器的顶部（不透明度100％）到底部（不透明度0％）更改不透明度级别？

我没试成功：

color: linear-gradient( bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

Answer 1

您需要一个元素来模拟渐变。

看看这个小提琴：http://jsfiddle.net/T5pd7/

.gradient{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
}