如何讓漸變背景中的文字淡出？

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的background-image：

Demo

p { 
    position: relative; 
    line-height: 1.25em; 
} 
p:after{ 
    background-image: linear-gradient(to left, #fff, rgba(255,255,255,0)); 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    height: 1.25em; 
    content: ''; 
}