如何使文字最终淡出渐变背景？

Question

我已经有了一个以图像为背景的元素.是否有可能使文本最终淡出,就像在这个例子中一样

问题是背景图像已经有了渐变,我需要它上面的文字才能变得透明而不需要在后台进行任何修改.

Answer 1

使用http://jsfiddle.net/Ff9JL/上的代码。这似乎就是您正在寻找的。看一下 li:after css 代码。

    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));