如何使最后的文本以渐变背景淡出？答案

【问题标题】：How to make text on the end fade out with gradient background?如何使最后的文本以渐变背景淡出？
【发布时间】：2013-11-09 07:40:00
【问题描述】：

我已经有一个以图像为背景的元素。是否可以像this question
中那样使最后的文本淡出

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

【问题讨论】：

我不确定我是否说得够清楚。取上面带有垂直渐变的灰色矩形。如何使文本：“CAREERS 2.0”在同一背景上水平淡出？
是的。这是可能的。只需使用 MarioErmando 答案中提供的代码（仅在 webkit 中支持）

标签： css text gradient opacity fadeout

【解决方案1】：

你说你不想修改它的background-image，因为它已经有另一个图像了。但请注意，对于 CSS3，您可以使用 multiple backgrounds。

但是如果你真的不想修改它的background-image，你可以修改它的:after的background-image：

Demo

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: '';
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

【讨论】：

【解决方案2】：

使用http://jsfiddle.net/Ff9JL/ 上的代码。这似乎是您正在寻找的。看看 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));

【讨论】：

这只是将渐变放在背景上，但我需要文本淡出而不是背景