使用DIV來掩蓋另一個DIV

Question

這個問題最好用截圖解釋說： http://i42.tinypic.com/2ccvx91.jpg

的包裝div有一個城市的背景圖像。

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

內部的DIV是一堆類的平方「其他的div：

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

你可以通過廣場看到這座城市，因爲不透明的。但你也可以透過廣場之間的空間，我不希望它做。我只想透過div看到它背後的元素，它們之間的空間是純黑色的。我怎樣才能做到這一點？

謝謝。

Answer 1

最好的辦法是去除餘量..給你的DIV邊框2 PX的..

Answer 2

怎麼樣設置border和使用包裝DIV隱藏的角落。你必須有陰性切緣爲重疊到雖然

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

這裏是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; 
} 
​