css - 如何使最后的文字淡出渐变背景？

Question

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

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

Answer 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>