CSS段落從黑暗到光線的不透明度

Question

我在div裏面有一些文字。我如何使用CSS使div中的文本從黑暗到光明？ （見下面的圖像，用Photoshop編輯）

在此先感謝。

Answer 1

http://jsfiddle.net/coma/YmzDS/

div.foo { 
    position: relative; 
} 

div.foo:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 50%; 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); 
    /* helps with underneath links */ 
    pointer-events: none; 
} 

http://www.colorzilla.com/gradient-editor/

Answer 2

下面是做這件事 - 做的：元素的內容之上，並設置爲線性漸變之後。我剛剛列入-webkit前綴的版本，所以通過它去，只要你喜歡，併產生其他前綴（這將在Chrome +野生動物園工作）： http://jsfiddle.net/jkoudys/2jkLV/

div { 
    position:relative; 
} 
div:after { 
    display:block; 
    content:" "; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));; 
}