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

Question

所以我圈出了 div(使用 border-radius)并且每个 div 都用一条线连接。问题是它们是半透明的，并且它们是从 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 有点 hack，我不知道它对你来说是否是一个好的解决方案，但你可以看看代码片段。

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