trasformando un div in trasparente per vedere attraverso due contenitori

Ho seguente marcaturatrasformando un div in trasparente per vedere attraverso due contenitori

<body> 
    <div class="holder"> 
     <div class="circle"></div> 
    </div> 
</body>

e ho applicato uno sfondo fisso all'elemento corpo e sfondo bianco applicata al titolare classe

body { 
    background: url(image.png); 
    background-attachment: fixed; 
} 

.holder { 
    width: 500px; 
    height: 500px; 
    background: #fff; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: rgba(0, 0, 0, 0); 
}

quello che hanno cercato di fare è rendere il cerchio trasparente per vedere lo sfondo del corpo. Semplicemente, quello che sto cercando è rendere il cerchio trasparente per vedere l'immagine di sfondo del corpo mentre lo sfondo bianco attorno al cerchio esiste ancora. per favore scusami il mio inglese. Ragazzi, per favore aiutatemi.

fonte

2013-06-07 The Last Coder

Quello che stai chiedendo di fare non funzionerà usando la trasparenza.

Tuttavia, v'è un lavoro intorno che è abbastanza accettabile:

body { 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
} 
.holder { 
    width: 500px; 
    height: 700px; 
    background: rgba(255,255,255,0.8); 
    border: 1px dotted blue; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
}

vedere demo: http://jsfiddle.net/audetwebdesign/FqMXz/

basta applicare un'immagine lo stesso sfondo alla .circle div.

Questo trucco è preso da uno dei libri CSS di Eric Meyer.

fonte

2013-06-07 15:12:34

NICE ..... Grazie signore :) –

Sei il benvenuto, buona domanda! –

I collegamenti immagine devono essere aggiornati da/400/500 a/g/400/500. Nuovo violino: http://jsfiddle.net/FqMXz/85/. Suggerimento di salvataggio, grazie. – steel

Il quarto numero in rgba() è il trasparenza alfa. Lo hai impostato su 0, che è completamente trasparente. 1 sarebbe completamente opaco. È necessario impostarlo su un valore compreso tra 0 e 1.

Detto questo, se si sta tentando di creare l'effetto di un foro, quindi ciò che è necessario è creare un'immagine di sfondo che sia bianca e trasparente cerchio tagliato dentro e rendere quello sfondo a .holder. Non importa quanto trasparente fai .circle se .holder è completamente opaco!

fonte

2013-06-07 15:07:35

i è necessario rendere il cerchio completamente trasparente per vedere lo sfondo del corpo mentre lo sfondo bianco attorno al cerchio esiste ancora. ma non è possibile a causa dello sfondo della classe .holder. (classe contenitore del cerchio). solo facendo cerchio trasparente non lo fa. potresti aiutarmi per favore? –

@solom, sì, rileggi il mio secondo paragrafo. Devi usare un'immagine trasparente per creare questo effetto, o come ho descritto o come Marc Audet specificato nella sua risposta. Entrambe le soluzioni funzionano, anche se il suo unico funziona per sfondi fissi. Ma sfortunatamente, non c'è bisogno di andare in giro per avere un'immagine. O crea un buco nello sfondo di '.holder' o crea uno sfondo in' .circle' che è una copia fissa dello sfondo del corpo. –

Derek sta facendo un buon punto. La mia risposta è specifica per uno sfondo fisso. In un progetto precedente, ho utilizzato un approccio simile a quello di Derek per creare una maschera circolare e di fantasia per una galleria fotografica. È bene capire entrambe le tecniche e quando usarle in modo appropriato. –

può essere si dovrebbe provare con l'aggiunta di opacità: attributo value o impostando il suo background-color: RGBA (0,0,0, valore)

Il valore deve essere compreso tra 0 e 1.

fonte

2013-06-07 15:13:26 Roshan

trasformando un div in trasparente per vedere attraverso due contenitori

risposta

Problemi correlati