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.

[pzin]

No puedo reproducir el problema. Inténtalo poner en un filete.

[Linton]

¿Qué es eso y para qué sirve?

[pzin]

Para publicar el HTML y CSS y luego ver el resultado. Es que con ese código que pones no se reproduce el problema, así que debe de haber algo más de código supongo.

[Linton]

¿Y las fotos se suben ahí también, o cómo?

[pzin]

No. Pero bueno, ¿sin foto no pasa eso? Creo que no hace falta, pero en caso contrario, siempre tienes imgur.

[Linton]

Rayos, pues he hecho otro montaje y no pasa... A ver si detecto el fallo en el código del comienzo.

¡Gracias!

[Linton]

Vale, aquí lo tienes en todo su esplendor Activa la regla de opacity al CSS y ya verás lo que sucede.

[alzacon]

Sin valor de opacidad: el color gris esta en el fondo, mientras que tienes la imagen como elemento. Es como si pones una imagen en el fondo y otra como elemento img, la última tapara a la otra.

Con un valor de opacidad dado el funcionamiento cambia. Creo que no te va solapando los fondos de más a menos general, sino que te saca ese fondo y lo aplica tras el contenido frontal del mismo.

Puedes quitar la imagen como elemento y ponerla como fondo, usando algo asi.

Código CSS:

.caja{
    width: 670px;
    height: 355px;
    background-image: url('http://www.lorempixum.com/670/355')
}
 

[pzin]

O le pones una posición relativa, también vale. Aunque si un fondo es un fondo, semánticamente sería más correcto hacer como dice alzacon.

[Linton]

Gracias a los dos, sobre todo quería asegurarme de que no genera otros fallos más gordos Un saludo.