在div结尾附近淡出文字？

Question

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

例如：

Answer 1

CSS渐变和rgba将完成此作业

Demo

Extended Text Version（已更新）

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/

关于最近在CSS3规范中介绍的rgba()，我希望你知道RGB代表什么，而a代表alpha，所以我没有使用HEX我正在使用{{ 1}}我只是在玩这里的alpha部分

Answer 2

跳过可能需要图像或SVG的IE9-，您可以添加覆盖整个宽度的position: absolute div，并具有渐变为白色的部分透明渐变。此div必须包含在您要覆盖的元素中，该元素必须为position: relative。

http://jsfiddle.net/JcPAT/

Answer 3

并非真正跨浏览器，但您可以使用以下内容：

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);