Can i fade text out at the end of a div?

As i scroll how can i fade text out at the top of a div over a background image without the use of an image?

I know loads of people will come on here and tell me every reason why i should use an image however can it be done without?

Any advice wou开发者_如何学Gold be greatly appreciated...

You'll have to overlay your div with another element (preferably a pseudo-element), and have a background-gradient on it, matching your div's background color.

Assuming your background is black, you'll use this:

div {
    position: relative;
}
div:before {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
}

Here's the fiddle: http://jsfiddle.net/SFYrg/

You'll obviously have to add all those vendor prefixes.

If you do not want to use an image, you could use a gradient instead, on a div which would be superimposed on top of your content div.

You can use http://www.colorzilla.com/gradient-editor/ for quickly generating your gradient, with all browser-specific prefixes.

  $("myElement").fadeOut("slow");

Put the text into a container of some sort and fade it out with jQuery. You don't need any images.