Geek Answers Handbook

Using a DIV to mask another DIV

This question is best illustrated by the screenshot: http://i42.tinypic.com/2ccvx91.jpg

The wrapper div has a background image of the city.

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

Inside this div there are a bunch of other 'square' class divs:

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

You can see through the squares of the city due to opacity. But you can also see through the spaces between the squares, which I do not want to do. I want to see only through divs to the element behind it, and the gaps between them are solid black. How can i do this?

Thank.

+5
source share
2 answers

The best bet is to remove the margin .. and give your div a border of 2 px.

+1
source

border div, . ,

jsfiddle 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; 
}
​
+1

More articles:


All Articles