相关疑难解决方法(0)

我期待创造一个效果是这样的,但我的网站具有动态background-color.请注意,此示例使用白色叠加层,但不适用于不同的背景.

p {
    width: 300px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    position: relative;
}
p:after {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

我希望做的是设置一个CSS不透明度渐变.这种作品,但代码太乱了.看看第二个例子,我可以在jQuery中实现它,但有没有办法在CSS中完全做到这一点？

我想知道是否有任何方法可以淡化链接而不是截断,如果它太长而无法放入容器中.这就是我的意思(从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方式实现相同的目标？提前致谢.