在div结尾附近淡出文字？

Question

是否可以使用CSS在div的末尾附近水平淡化文本.

例如这样:

Answer 1

CSS渐变并将rgba为此完成工作

演示

扩展文本版本(更新)

div {
    position: relative;
    display: inline-block;
}

div span {
    display: block;
    position: absolute;
    height: 80px;
    width: 200px;    
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    top: 0;

}

注意:我已经删除了跨浏览器的CSS渐变代码,您可以从http://www.colorzilla.com/gradient-editor/获取它

关于rgba()它最近在CSS3规范中介绍,我希望你知道RGB代表什么a代表alpha,所以不是使用HEX我正在使用RGBA而只是在这里玩alpha部分