隐藏透明DIV后面的元素，但不包括背景 [英] Hide elements behind transparent DIV but not background

问题描述

所以我已经在div上画了一圈（用 border-radius ），每一个都用一条线连接起来。问题在于它们是半透明的，并且它们从div的中心连接，因此您可以通过div看到一条线。我可以让div不透明，但我不想显示背景。那么，是否有隐藏div背后的特定元素的方法，但显示页面的背景？

这里是我的模拟情况（在我的代码行中自动生成）：

这就是我想要的：

解决方案

它与 z-index 有点破解，我不知道它是否可以为你提供一个很好的解决方案但您可以查看代码段。

添加 z-index：-1 至 .simulated-line so line会回到圆圈。

添加 background：inherit; 到 .circle ，所以背景被填充。

  body {background：url（http://www.intrawallpaper.com/static/images/abstract-mosaic-background。 png）不重复中心中心固定; background-size：cover;}。circle {border：2px solid red;宽度：36px;身高：36px;边界半径：100％;位置：绝对; 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;宽度：181px; height：4px;背景：绿色; top：64px; left：118px; transform-origin：0％50％;转换：旋转（25deg）; z-index：-1;}  

< div class =circlestyle =left：100px; top：46px>< / div>< div class =circlestyle =left：260px; top：121px>< / div> < div class =simulated-line>< / div>

so I have circled divs (with border-radius) 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.

Here's my simulated situation (in my code lines generate automatically):

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: This is what it looks like:

This is how I want it:

解决方案

Its a little hack with z-index, I don't know if it can be a good solution for you or not but you can have look at snippet.

Add z-index:-1 to .simulated-line so line will goes back to circle.

Add background: inherit; to .circle so background gets filled.

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>

这篇关于隐藏透明DIV后面的元素，但不包括背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！