隐藏透明 DIV 后面的元素但不隐藏背景

Question

所以我圈出了 div（带有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>

编辑：这就是它的样子：

这就是我想要的：

Answer 1

z-index 有点小技巧，我不知道它是否适合你，但你可以看看 sn-p。

将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;
  background-color: #000;
}

.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>