Using a DIV to mask another DIV

Question

This question is best explained with a screenshot: http://i42.tinypic.com/2ccvx91.jpg

The wrapper div has a background image of a city.

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

Inside that div is a bunch of other divs of class 'square':

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

You can see through the squares to the city because of the opacity. But you can also see through the spaces in between the squares, which I don't want it to do. I want to only be able to see through the divs to the element behind it, with the spaces between them being solid black. How can I do this?

Thanks.

Answer 1

best bet is remove margin.. and give your div border of 2 px..