Sử dụng một DIV để mặt nạ khác DIV

Question

Câu hỏi này được giải thích tốt nhất với một ảnh chụp màn hình: http://i42.tinypic.com/2ccvx91.jpg

Các div wrapper có một hình nền của một thành phố.

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

Bên div đó là một loạt các divs khác của lớp 'vuông':

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

Bạn có thể nhìn xuyên qua các ô vuông đến thành phố vì sự mờ đục. Nhưng bạn cũng có thể nhìn xuyên qua các khoảng trống giữa các ô vuông mà tôi không muốn nó làm. Tôi muốn chỉ có thể nhìn thấy thông qua các div để các yếu tố đằng sau nó, với các không gian giữa chúng được rắn màu đen. Tôi có thể làm cái này như thế nào?

Cảm ơn.

Answer 1

đặt cược tốt nhất là loại bỏ lề .. và đưa ra biên giới div của bạn của 2 px ..

Answer 2

Điều gì về việc đặt border và sử dụng div bao bọc để ẩn các góc. Bạn phải có một biên độ tiêu cực đối với sự chồng chéo để làm việc mặc dù

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

và đây là 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; 
} 
​