Background invisible que aparece si meto opacity (??)

[Linton]

Aquí muestro algo que me tiene desquiciado Arriba podemos ver el background del texto, que abajo ha desaparecido. La única diferencia es que arriba el div del texto tiene indicado opacity:.4; o sea que si quito la regla para opacity el background se hace invisible


El html:

Código HTML:

<div class="caja">
    <img src="aviones.jpg">
    <div class="transparent1">Aviones</div>
</div>
 

Y el CSS, avión de arriba:

Código CSS:

width: 30%;
    font: 70px Helvetica;
    font-weight: bold;
    color: red;
    background: gray;
    opacity: .4;}
 

...y avión de abajo:

Código CSS:

width: 30%;
    font: 70px Helvetica;
    font-weight: bold;
    color: red;
    background: gray;
 

¿Alguien sabe por qué ocurre esto? Gracias, un saludo.