5

この質問はスクリーンショットで最もよく説明されています：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を通して、その背後にある要素までしか見えないようにしたいのですが、それらの間のスペースは黒一色です。これどうやってするの？

ありがとう。

4

2 に答える 2

1

を設定border し、ラッパーdivを使用してコーナーを非表示にするのはどうですか。ただし、オーバーラップが機能するには、負のマージンが必要です。

これがanimusonからの適応されたjsfiddleです：

<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; 
}
​
于 2012-04-08T05:48:23.080 に答える
1

最善の策は、マージンを削除することです。そして、divの境界線を2ピクセルにします。

于 2012-04-08T05:51:24.950 に答える