El uso de un DIV para enmascarar otra DIV

Question

Esta pregunta se explica mejor con una captura de pantalla: http://i42.tinypic.com/2ccvx91.jpg

el div contenedor tiene una imagen de fondo de una ciudad.

#wrapper { 
    background:url('city.jpg'); 
} 

Dentro de ese div es un montón de otros divs de 'cuadrado' de clase:

.square { 
    width:40px; 
    height:40px; 
    background-color:#27272f; 
    opacity:.8; 
    margin:2px; 
} 

Se puede ver por las plazas de la ciudad debido a la opacidad. Pero también puedes ver a través de los espacios entre los cuadrados, lo que no quiero que haga. Solo quiero poder ver a través de los divs el elemento detrás de él, con los espacios entre ellos siendo negro sólido. ¿Cómo puedo hacer esto?

Gracias.

Answer 1

mejor es eliminar el margen .. y darle a su frontera div de 2 px ...

Answer 2

¿Qué hay de la configuración del border y el uso de un div envoltura para ocultar las esquinas. Tienes que tener un margen negativo de la superposición de trabajar aunque

Here is the adapted jsfiddle from animuson:

<div id="wrapper"> 
    <div class="hidingborder"> 
     <div class="square"></div> 
    </div> 
    <div class="hidingborder"> 
     <div class="square"></div> 
    </div> 
    <div class="hidingborder"> 
     <div class="square"></div> 
    </div> 
    <div class="hidingborder"> 
     <div class="square"></div> 
    </div> 
    <div class="hidingborder"> 
     <div class="square"></div> 
    </div> 
</div>​ 

y aquí está el css

#wrapper { 
    background:Green; 
    font-size:0; 
} 
.square { 
    width:40px; 
    height:40px; 
    background-color:#27272f; 
    opacity:.8; 
    border:2px solid black; 
    border-radius:5px; 
    display:inline-block; 
    margin:-2px; 
} 
.hidingborder 
{ 
    border:#27272f solid; 
    display:inline-block; 
} 
​