淡化容器末端的链接

Question

我想知道是否有任何方法可以淡化链接而不是截断,如果它太长而无法放入容器中.这就是我的意思(从user966582的问题中获取的图像):

最简单的解决方案是将带有渐变背景的绝对定位元素插入容器中,但在这种情况下,它将覆盖链接,使其在渐变下变得不可点击.

我找到的另一种方法是使用-webkit-mask:

.wide-faded {
    -webkit-mask: -webkit-linear-gradient(right,
        rgba(255,255,255,0),
        rgba(255,255,255,1) 103px,
        rgba(255,255,255,1)
    );
}

结果正是我所需要的(链接是可点击的!)但它缺乏crossbrowser支持.

有没有办法以crossbrowser方式实现相同的目标？提前致谢.

Answer 1

您可以将渐变应用于伪元素的背景

.fade {
    position:relative;
    display:inline-block;
}
.fade:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:20px;
    height:100%;

    background: -webkit-gradient(linear, 0 0, 100% 0, 
        from(rgba(255, 255, 255, 0)), 
        to(rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}