title: Hide elements behind transparent DIV but not background
body: <p>so I have circled divs (with <code>border-radius</code>) and each one is connected with a line. Problem is that they are semi-transparent, and they're connected from the center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery.</p>
  
  <p>Here's my simulated situation (in my code lines generate automatically):</p>
  
  <p><a href="https://jsfiddle.net/muud6rqf/2/" rel="noreferrer">https://jsfiddle.net/muud6rqf/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle" style="left: 100px; top: 46px"&gt;&lt;/div&gt;
  
  &lt;div class="circle" style="left: 260px; top: 121px"&gt;&lt;/div&gt;
    
  &lt;div class="simulated-line"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: This is what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/WtoZT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WtoZT.png" alt="enter image description here"></a></p>
  
  <p>This is how I want it:</p>
  
  <p><a href="https://i.stack.imgur.com/YEUMX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YEUMX.png" alt="enter image description here"></a></p>