CSS -Градиент прозрачности изображения

Я хотел бы, чтобы непрозрачность моего фонового изображения изменялась от 100% до 0%. Я мог бы использовать другой актив изображения, где я использую редактор изображений, чтобы сделать изображение непрозрачным, однако я хочу использовать как можно меньше активов. Можно ли это сделать с помощью CSS? Я знаю, что мог бы сделать несколько div, в которых я меняю непрозрачность каждого из них, однако для этого потребуется много div, чтобы он выглядел хорошо.

Вот как сейчас выглядит мой код с решением, которое я не хочу использовать:

И CSS:

.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 5px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}

#cfa1 { top: 160px; opacity: 1; }
#cfa2 { top: 165px; opacity:.9; }
#cfa3 { top: 170px; opacity:.8; }
#cfa4 { top: 175px; opacity:.7; }
#cfa5 { top: 180px; opacity:.6; }
#cfa6 { top: 185px; opacity:.5; }
#cfa7 { top: 190px; opacity:.4; }
#cfa8 { top: 195px; opacity:.3; }
#cfa9 { top: 200px; opacity:.2; }
#cfa10 { top: 205px; opacity:.1; }

Для тех, кто не понимает, что делает этот код, вот:http://jsfiddle.net/FVNY7/2/У меня есть фоновое изображение, и я хочу, чтобы содержимое исчезало при прокрутке вверх, поэтому у меня было бы то же изображение с непрозрачностью от 1 до 0, чтобы создать этот эффект. Если бы фон был сплошным цветом, я мог бы просто использовать градиент rgba, но это изображение.