Saydam DIV'nin arkasındaki öğeleri gizleyin ama arka plan değil

Question

, bu yüzden de (border-radius ile birlikte) div'larım var ve her biri bir satır ile bağlı. Problem onların yarı saydam olmaları ve divun merkezinden bağlandıklarıdır, bu yüzden div üzerinden bir çizgi görebilirsiniz. Div opaklığını yapabilirim, ama arka planı göstermem. Yani, bir div'in arkasındaki belirli öğeleri saklamanın bir yolu var, ama sayfanın arka planını gösteriyor mu? Js/jquery kullanıyor olsa bile.

İşte benim simüle durum (benim kod satırları otomatik olarak oluşturur):

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:

: Göründüğü gibi ne

Ben böyle olsun istiyorum: bu iyi sizin için çözüm olabilir ya da olmayabilir ama pasajı de göz eğer

Answer 1

Onun z-index ile küçük kesmek, bilmiyorum.

z-index:-1 için .simulated-line ekleyin, böylece çizgi daireye geri döner.

background: inherit; için .circle ekleyin, böylece arka plan doldurulur.

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>