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

Question

我已经有一个以图像为背景的元素。是否可以像这个问题一样使最后的文本淡出

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

Answer 1

您说您不想修改它background-image，因为它已经有另一个图像。但请注意，使用 CSS3 您可以使用多个背景。

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

演示

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>

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