隐藏透明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

它与Replace "DISPATCH_TIME_NOW" with "dispatch_time_t(DISPATCH_TIME_NOW)"有点混乱，我不知道它是否适合你，但你可以查看片段。

将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;
}