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:
Ver original.caja{
width: 670px;
height: 355px;
background-image: url('http://www.lorempixum.com/670/355')
}