Question

最好用截图解释这个问题： http://i42.tinypic.com/2ccvx91.jpg

包装div具有城市的背景图像。

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

在div里面是一堆其他的'square'类div：

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

由于不透明度，您可以透过广场看到城市。但是你也可以看到正方形之间的空间，我不希望它这样做。我希望只能通过div看到它背后的元素，它们之间的空间是纯黑色。我怎么能这样做？

感谢。

Answer 1

如何设置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; 
}

Answer 2

最好的选择是删除保证金..并给你的div边界2 px ..

使用DIV掩盖另一个DIV

2 个答案: