Tenho uma imagem carregada pelo usuário (quase sempre um JPEG) que gostaria de usar como plano de fundo. Para torná-lo menos perturbador e manter o conteúdo legível, estou tentando diminuir sua opacidade. Essencialmente, eu gostaria de algo com um efeito como a cor sólidargba.

Tentei colocar o plano de fundo em uma div com uma margem inferior negativa e puxe o conteúdo sobre ele:

<div style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div>
<!-- page content -->

No entanto, parece hackish e apenas parcialmente funciona. É exatamente o que eu quero atéopacity é jogado lá; coloca a div no topo. (Comoopacity afeta as camadas!?)

Eu considereiposition: absolute para a div background e o conteúdo para que eu possa brincar com oz-index mas isso quebra o modelo, isso é tudo.

Como faço para que essa imagem seja um fundo translúcido?