Como posso aplicar um efeito de fade-out-text com um gradiente transparente para branco? [fechado] - html, css, css3, z-index, transparência

Eu gostaria de criar um efeito para diminuir a parte inferior dos artigos (semelhante ao efeito sobre os artigos wsj.com). #transparent div com um fundo gradiente que se torna menos transparente. No entanto, o fundo não encobre o texto, por isso o fundo branco não aparece. Como posso consertar para que o branco cubra o texto?

#translucent{
margin-top: -100px;
content: "";
height: 110px;
z-index: 2;
width: 100%;
positon: relative;
background: -webkit-linear-gradient(top, rgba(256,256,256,0) 0%,rgba(256,256,256,0.5) 90%,rgba(256,256,256,1) 100%);
}

<div>
<p>
The quick brown fox jumps over a lazy dog </p>
<p>
The quick brown fox jumps over a lazy dog </p>
<p>
</div>
<div id="translucent">
</div>

(Alterar a cor para preto atingiria um efeito de fade a preto, mas quero que o texto fique branco.)

Respostas:

Parece que está mudando positon: relative; para position: absolute; resolveu o problema.