淡化 div 末尾附近的文本？答案

【问题标题】：Fade text near end of div?淡化 div 末尾附近的文本？
【发布时间】：2013-03-30 20:08:29
【问题描述】：

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

例如这样：

【问题讨论】：

渐变叠加、图像叠加、浏览器特定滤镜...
除非指定浏览器，否则我投票支持图像叠加
改用text-overflow:ellipsis怎么样？
UX SE 上的相关线程：Studies or experience on using faded text to indicate more content?。 D. Walsh 的相关教程：Elegant Overflow with CSS Ellipsis

标签： html css

【解决方案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/

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

【讨论】：

我认为您应该将其更新为与 Webkit 兼容；这些是一些流行的浏览器
来吧，-2 和 Explosion Pills，只是我不想在这里转储一大堆代码，但我只是做一个演示
您不能只添加-webkit-linear-gradient 来完成这项工作； 135deg 不太兼容，因此需要进行额外的更改。坦率地说，我会首先制作与 webkit 兼容的版本
@ExplosionPills 我知道，实际上我从 colorzilla 生成渐变代码，正如您所知，它保存了会话中最后使用的，它保存了我以前用于我的项目的对角线作为默认设置，所以更改了它，谢谢引起我的注意

【解决方案2】：

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

http://jsfiddle.net/JcPAT/

【讨论】：

【解决方案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%);

【讨论】：

目前哪些浏览器支持任一版本？
那么，它是一个被 W3C 认可的 webkit 特性吗？ :-)