2016-07-15 3 views
5

così ho cerchiato div (con border-radius) e ognuno è collegato con una linea. Il problema è che sono semi-trasparenti e sono connessi dal centro del div, quindi puoi vedere una linea attraverso il div. Potrei rendere il div opaco, ma non voglio mostrare lo sfondo. Quindi, c'è un modo per nascondere elementi specifici dietro un div, ma mostrare lo sfondo della pagina? Anche se sta usando js/jquery.Nascondere gli elementi dietro DIV trasparente ma non lo sfondo

Ecco la mia situazione simulata (nel mio codice linee generano automaticamente):

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: Questo è quello che sembra:

enter image description here

Questo è come lo voglio:

enter image description here

+1

è possibile pubblicare il tuo esempio di codice? –

+1

è necessario inserire il codice ... giù voto fino allo snippet –

+0

Invece di usare un div w/un cerchio css, perché non usare solo un cerchio.png come sfondo per quel div? – Zze

risposta

5

E 'un piccolo hack con z-index, non so se può essere una buona soluzione per voi o no, ma è possibile avere un'occhiata a snippet.

Aggiungi z-index:-1 a .simulated-line così la linea tornerà alla cerchia.

Aggiungi background: inherit; a .circle in modo da riempire lo sfondo.

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>

+0

È così semplice?Wow grazie, ancora una domanda, e se la linea fosse generata in una tela che è "zio" dei cerchi (la tela è il fratello del genitore dei cerchi)? Ho provato a utilizzare la tua soluzione lì ma non funziona –

+0

Puoi condividere il violino? – Rohit

+0

Sì, dammi un secondo ... –

Problemi correlati