靠近div末尾的淡入淡出文字？

是否可以使用CSS在div末尾水平淡化文本。靠近div末尾的淡入淡出文字？

例如像这样：

enter image description here

来源

2013-03-30 user966582

渐变叠加，图像叠加，特定浏览器的过滤器... –

我投的图像叠加，除非浏览器被指定 –

怎么样使用'文本溢出：ellipsis'呢？ –

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/

关于rgba()它最近在CSS3规范中介绍过，我希望你知道RGB代表的是什么，a代表alpha，所以不是使用HEX我使用RGBA和我刚刚与阿尔法部分在这里玩

来源

2013-03-30 20:14:54

为什么-1？：O原因？ –

我认为您应该将其更新为与Webkit兼容;这些是一些流行的浏览器 –

在这里，我们去，-2和爆炸药丸，这只是我不想在这里转储大量的代码，但我只是做一个演示 –

没有真正跨浏览器友好的，但你可以使用类似：

-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%);

来源

2013-03-30 20:11:36

哪些浏览器当前支持这两种版本？ –

http://caniuse.com/#search=mask并不多... –

那么，这是W3C公认的webkit功能吗？ :-) –

跳绳IE9-，这可能需要一个图像或SVG，你可以添加一个position: absolute DIV覆盖全宽，并具有部分透明的梯度渐变变白。该div必须包含在您想要覆盖的元素中，该元素必须是position: relative。

http://jsfiddle.net/JcPAT/

来源

2013-03-30 20:17:59

靠近div末尾的淡入淡出文字？

回答

相关问题