淡化容器末端的链接

Question

我想知道是否有任何方法可以淡化链接而不是截断，如果它太长而无法放入容器中。这就是我的意思（从user966582's question获取的图像）：

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

我找到的另一种方法是使用-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);
}

Answer 2

你可以试试这个：

HTML

<div>
  <a href="#">
   This is some clickable Text 
  </a>
</div>

CSS

div {
  position:relative;
  width:250px;
  overflow:hidden;
}
a {
  white-space:nowrap;
  display:inline-block;
}
a:after {
  content:" ";
  display:block;
  position:absolute;
  z-index:1;
  right:0;
  height:100%;
  width:150px;
  top:0;
  background: -webkit-gradient(linear, 0 0, 100% 0, 
    from(rgba(255, 255, 255, 0)), 
    to(rgba(255, 255, 255, 1)));
}

查看此演示 http://jsfiddle.net/6GjHV/10/