Css 如何使用渐变背景使末端的文本淡出？

我已经有了一个以图像为背景的元素。是否有可能使末尾的文字像中一样淡出

问题是背景图像已经有了一个渐变，我需要它上面的文本变得透明，而不需要在背景中进行任何修改。

使用上面的代码。这似乎就是你要找的。看看li:after-css代码

    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

---

您说您不想修改它的

背景图像

，因为它已经有另一个图像了。但是请注意，使用CSS3您可以使用

但是如果你真的不想修改它的

背景图像

，你可以在

的
背景图像之后修改它的
：



Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的

这只是将渐变放在背景上，但我需要文本淡出而不是背景。我不确定我是否说得足够清楚。以上面带有垂直渐变的灰色矩形为例。我怎样才能使文字“职业2.0”在同一背景下水平淡出？是的。这是可能的。只需使用MarioErmando答案中提供的代码（仅在webkit中支持）
p {
  position: relative;
  line-height: 1.25em;
}

p:after {
  background-image: linear-gradient( to left, #fff, rgba(255, 255, 255, 0));
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1.25em;
  content: '';
}