Скрыть элементы за прозрачным DIV, но не фоном

Question

поэтому у меня есть круговые divs (с border-radius), и каждый из них связан с линией. Проблема в том, что они полупрозрачны, и они связаны из центра div, поэтому вы можете видеть линию через div. Я мог бы сделать div непрозрачным, но я не смогу показать фон. Итак, есть ли способ скрывать определенные элементы, которые находятся за div, но показывать фон страницы? Даже если он использует js/jquery.

Вот моя моделируемой ситуации (в моем коде строки генерировать автоматически):

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: Это то, что он выглядит следующим образом:

Это, как я хочу это:

Answer 1

Его немного рубить с z-index, я не знаю, если это может быть хорошим решением для вас или нет, но вы можете взглянуть на фрагмент кода.

Добавить z-index:-1 в .simulated-line поэтому линия вернется к кругу.

Добавить background: inherit; в .circle так что фон заполняется.

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>