पारदर्शी सर्कल कैसे बनाएं?

Question

क्या सीएसएस में इस प्रभाव को पाने का कोई तरीका है?

मैं इस सीएसएस के साथ खेलने की कोशिश लेकिन यह केवल पहली परत काट देता है।

div{ 
    width:300px; 
    height:300px; 
    position:relative; 
    overflow:hidden; 
} 
div:before{ 
    content:''; 
    position:absolute; 
    bottom:50%; 
    width:100%; 
    height:100%; 
    border-radius:100%; 
    box-shadow: 0px 300px 0px 300px #448CCB; 
} 

Answer 1

सबसे आसान तरीका अतिप्रवाह छिपा (ग्रे एक)
अंदर से के साथ एक पारदर्शी DIV उपयोग करने के लिए बस बहुत बड़ी प्रसार के साथ बॉक्स-छाया के साथ एक चक्र डाल है।

html, body{height:100%;} 
 
body{ 
 
    background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50%/cover; 
 
} 
 

 
.hasCircle{ 
 
    width:150px; 
 
    height:300px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    float:left; 
 
} 
 
.hasCircle:after{ 
 
    content:" "; 
 
    position:absolute; 
 
    left:0; right:0; 
 
    margin:100px auto; 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    box-shadow: 0 0 0 1000px #444; 
 
}

<div class="hasCircle"></div> 
 
<div class="hasCircle"></div> 
 
<div class="hasCircle"></div>

आप ऊपर मैं :after छद्म तत्व है जो (अतिव्यापी छद्म तत्व के कारण) .hasCircle में कुछ पाठ को रोकने दिखाई दे सकता है हो सकता है का उपयोग किया है देख सकते हैं, लेकिन यह सिर्फ करने के लिए एक विचार प्राप्त करें, आप इसे वास्तविक तत्व का उपयोग करके कर सकते हैं जैसे:

<div class="boxTransparentOverflow"> 
    <div class="theTransparentCircleWithGraySpread"></div> 
    Some text 
</div>