Utilizzando un DIV per mascherare un altro DIV

Question

questa domanda è meglio spiegata con uno screenshot: http://i42.tinypic.com/2ccvx91.jpg

Il div involucro ha un'immagine di una città sullo sfondo.

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

All'interno che div è un mucchio di altri div di classe 'piazza':

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

È possibile vedere attraverso le piazze della città a causa della opacità. Ma puoi anche vedere attraverso gli spazi tra i quadrati, che non voglio che faccia. Voglio solo essere in grado di vedere attraverso i div per l'elemento dietro di esso, con gli spazi tra di loro che sono di colore nero. Come posso fare questo?

Grazie.

Answer 1

migliore da fare è rimuovere il margine .. e dare il vostro confine div di 2 px ..

Answer 2

Che ne dici di impostare il border e utilizzare un div wrapper per nascondere gli angoli. Devi avere un margine negativo per la sovrapposizione di lavorare anche se

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>​ 

e qui è il 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; 
} 
​