एक और DIV

Question

यह सवाल मुखौटा करने के लिए एक DIV का उपयोग सबसे अच्छा स्क्रीनशॉट के साथ समझाया गया है: http://i42.tinypic.com/2ccvx91.jpg

आवरण div एक शहर के एक पृष्ठभूमि छवि है।

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

आप अस्पष्टता की वजह से शहर के चौराहों के माध्यम से देख सकते हैं:

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

कि div के अंदर वर्ग 'वर्ग' के अन्य divs का एक समूह है। लेकिन आप वर्गों के बीच की जगहों के माध्यम से भी देख सकते हैं, जिन्हें मैं नहीं करना चाहता हूं। मैं केवल divs के माध्यम से तत्व के लिए देखने के लिए सक्षम होना चाहता हूं, उनके बीच की जगह ठोस काले होने के साथ। मैं यह कैसे कर सकता हूँ?

धन्यवाद।

Answer 1

सबसे अच्छा शर्त मार्जिन हटाने है .. और अपने div सीमा देना 2 पीएक्स ..

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

और यहाँ सीएसएस

#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; 
} 
​