您可以使用 CSS、 来完成此操作，但目前除了现代版本的 Chrome、Safari 和 Opera 之外，其他浏览器还没有太多支持。 Firefox 目前仅支持 SVG 蒙版。 请参阅Caniuse结果以获取更多信息。
编辑：除 IE 之外的所有浏览器现在都支持所有mask-这里提到的属性。
CSS:
p {
color: red;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
诀窍是指定一个遮罩，该遮罩本身就是一个以不可见结尾的渐变（通过 alpha 值）
查看具有纯色背景的演示，但您可以将其更改为您想要的任何内容。
DEMO
还请注意，所有通常的image属性可用于 mask-image
p {
color: red;
font-size: 30px;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-size: 100% 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left top, left bottom;
}
div {
background-color: lightblue;
}
<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>
现在，可以使用另一种方法，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);
pointer-events: none;
}
<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>
