我正在寻找一个效果
like this，但我的网站有一个动态的背景颜色。请注意，此示例使用白色覆盖，不适用于不同的背景。
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,0),1));
}
我希望做的是设置CSS不透明度梯度。 This的作品，但代码太凌乱了。看这第二个例子，我可以在jQuery中实现它，但是有没有办法完全在CSS中完成？
解决方法
您可以在CSS中执行此操作，但Chrome浏览器，Safari和Opera的浏览器目前还没有太多的支持。 Firefox目前只支持SVG掩码。有关更多信息，请参阅
Caniuse结果。
CSS：
p {
color: red;
-webkit-mask-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,1)),to(rgba(0,0)));
}
诀窍是指定一个本身就是以不可见(通过α值)结束的渐变的蒙版，
看到一个具有坚实背景的演示，但是您可以将其更改为任何您想要的。
现在，Chrome，Firefox，Safari和Opera都支持另一种方法。
想法是使用
mix-blend-mode: hard-light;
如果颜色为灰色，则会给出透明度。然后，元素上的灰色重叠将创建透明度
div {
background-color: lightblue;
}
p {
color: red;
overflow: hidden;
position: relative;
width: 200px;
mix-blend-mode: hard-light;
}
p:after {
position: absolute;
content: "";
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background: linear-gradient(transparent,gray);
}
<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>
