Opacidad y transparencias en imágenes de fondo

He estado trabajando en una web que basaba su interfaz en una imagen de fondo –un bonito campo de espigas–. Como quería que el texto estuviese claro, veía conveniente reducir la opacidad del fondo de la capa que contenía el texto. He visto por ahí que con algunas técnicas en css como “opacity: 0.5″ o “moz-opacity: .5″ se podía lograr. Pero, para empezar, no son códigos amigables con los estándares web. Así que decidí hacer algo sencillo. Por otro lado, también aplicaba la opacidad al texto, por lo que la legibilidad que exigía se veía mermada.

¿Cuál fue mi solución? Ponerle un fondo blanco, en formato .png, con opacidad del 50%. Se puede hacer con cualquier editor de imágenes que lo permita (photoshop, pixelmator…).

Ejemplo HTML/CSS:

<div id=”wrapper”>
<div id=”texto”>Esto es una prueba.</div>
</div>

#wrapper {
width: 950px;
margin: 0 auto;
background-image: url(images/bg_white.png);
padding: 2em;
}