How to make text on the end fade out with gradient background?

Question

I already have an element with an image as a background. Is it possible make a text on the end fade out just like in this question

The problem is that the background image already have a gradient and I need the text on it just to become transparent without any modifications in the background.

Answer 1

You say that you don't want to modify its background-image because it has another image already. But be aware that with CSS3 you can use multiple backgrounds.

But if you really don't want to modify its background-image, you could modify its :after's 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>

Answer 2

Use the code on http://jsfiddle.net/Ff9JL/. This seems to be what you are looking for. Take a look at the li:after css code.

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