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):

/

body{
  background: url(.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>

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/muud6rqf/2/

body{
  background: url(http://www.intrawallpaper./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:

• javascript
• jquery
• html
• css

• 1 can you post your code example? – Madhawa Priyashantha Commented Jul 15, 2016 at 3:34
• 1 you need to post your code... down vote until snippet – Alvaro Silvino Commented Jul 15, 2016 at 3:34
• Instead of using a div w/ a css circle, why not just use a circle.png as the background for that div? – Zze Commented Jul 15, 2016 at 3:35
• Ok I'll edit sorry for no code but please don't downvote they will delete the post :( – ALSD Minecraft Commented Jul 15, 2016 at 3:38
• Hey! your recently posted fiddle is interesting. I suggest to you that you edit your question to make it more precise. Paragraph it! Nail the question... What you try to do looks a bit plicated from a concept point of view. What do you want to do ? I upvoted to counter the downs ;) – Louys Patrice Bessette Commented Jul 15, 2016 at 3:50

1 Answer 1

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