Ukryj elementy za przezroczystym DIV, ale nie w tle

Question

, więc mam kółko div (z border-radius) i każdy jest połączony z linią. Problem polega na tym, że są one półprzezroczyste i są połączone od środka div, dzięki czemu można zobaczyć linię przez div. Mogę sprawić, że div będzie nieprzejrzysty, ale nie będę mógł pokazać tła. Czy istnieje sposób ukrywania określonych elementów, które znajdują się za elementem div, ale pokazują tło strony? Nawet jeśli używa js/jquery.

Oto mój symulowanych sytuacji (w moim kodu linie generować automatycznie):

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: To jest jak to wygląda:

ten sposób chcę go:

Answer 1

Jest trochę siekać z z-index, ja nie wiem, czy to może być dobrym rozwiązaniem dla Ciebie lub nie, ale może trzeba spojrzeć na fragmencie.

Dodaj z-index:-1 do .simulated-line, więc linia powróci do koła.

Dodaj background: inherit; do .circle, aby tło wypełniło się.

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>