div 末尾的淡入文本？

是否可以使用 CSS 在 div 末尾附近水平淡入文本。

例如这样：

CSS 渐变和rgba会做这个工作

Demo

扩展文本版本（更新）

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我只是在这里玩阿尔法部分