Nascondere gli elementi dietro DIV trasparente ma non lo sfondo

Question

così ho cerchiato div (con border-radius) e ognuno è collegato con una linea. Il problema è che sono semi-trasparenti e sono connessi dal centro del div, quindi puoi vedere una linea attraverso il div. Potrei rendere il div opaco, ma non voglio mostrare lo sfondo. Quindi, c'è un modo per nascondere elementi specifici dietro un div, ma mostrare lo sfondo della pagina? Anche se sta usando js/jquery.

Ecco la mia situazione simulata (nel mio codice linee generano automaticamente):

https://jsfiddle.net/muud6rqf/2/

body{ 
 
    background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.circle{ 
 
    border: 2px solid red; 
 
    width: 36px; 
 
    height: 36px; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6); 
 
} 
 

 
.simulated-line{ 
 
    position: absolute; 
 
    width: 181px; 
 
    height: 4px; 
 
    background: green; 
 
    top: 64px; 
 
    left: 118px; 
 
    transform-origin: 0% 50%; 
 
    transform: rotate(25deg); 
 
}

<div class="circle" style="left: 100px; top: 46px"></div> 
 

 
<div class="circle" style="left: 260px; top: 121px"></div> 
 
    
 
<div class="simulated-line"></div>

EDIT: Questo è quello che sembra:

Questo è come lo voglio:

Answer 1

E 'un piccolo hack con z-index, non so se può essere una buona soluzione per voi o no, ma è possibile avere un'occhiata a snippet.

Aggiungi z-index:-1 a .simulated-line così la linea tornerà alla cerchia.

Aggiungi background: inherit; a .circle in modo da riempire lo sfondo.

body{ 
 
    background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.circle{ 
 
    border: 2px solid red; 
 
    width: 36px; 
 
    height: 36px; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6); 
 
    background: inherit; 
 
} 
 

 
.simulated-line{ 
 
    position: absolute; 
 
    width: 181px; 
 
    height: 4px; 
 
    background: green; 
 
    top: 64px; 
 
    left: 118px; 
 
    transform-origin: 0% 50%; 
 
    transform: rotate(25deg); 
 
    z-index: -1; 
 
}

<div class="circle" style="left: 100px; top: 46px"></div> 
 

 
<div class="circle" style="left: 260px; top: 121px"></div> 
 
    
 
<div class="simulated-line"></div>