Question

我已经有了一个以图像为背景的元素。是否有可能使文本最终淡出，就像在example

中一样

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

Answer 1

使用http://jsfiddle.net/Ff9JL/上的代码。这似乎是你在寻找的。看一下li：在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));

Answer 2

您说您不想修改其background-image，因为它已经有了另一张图片。但请注意，使用CSS3，您可以使用multiple backgrounds。

但如果您真的不想修改其background-image，则可以修改其:after的{{1}}：

Demo

background-image

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

2 个答案: