Come creare un cerchio trasparente?

Question

C'è un modo per ottenere questo effetto nei CSS?

cerco di giocare con questo css, ma taglia solo primo strato.

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

Il modo più semplice è quello di utilizzare un trasparente DIV con troppopieno nascosto (quello grigio)
rispetto all'interno semplicemente mettere un cerchio con box-ombra con davvero grande diffusione.

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>

Come potete vedere sopra Ho usato il pseudo elemento :after che potrebbero prevenire alcuni testo in .hasCircle per essere visibili (a causa della pseudo-elemento di sovrapposizione), ma è solo a avere un'idea, puoi farlo usando un elemento reale come:

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