div trasparenti

**corvil90** · 19-03-2012, 13:06

ciao ragazzi,
mi trovo di nuovo in difficolta....
Innanzi tutto parto col dire che ho usato il CSS3.
Il mio problema odierno è quello di voler mettere sopra a un div trasparente un div figlio che risulti NON trasparente!!!
Ponendo i div annidati il div figlio su div trasparente risulta trasparente anche lui.... ho pensato allo z-index... ma nulla da fare

Posto il codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel = "stylesheet" type = "text/css" href = "home.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/jquery.slider.css" rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />

<title>Benvenuto!</title>


</head>


<body>
[img]sfondosito.jpg[/img] 
 
<div id="divsf" class="myBox"> 
		<div id="intest" class="myBox"></div>
              <div id="lista" class="myBox">
                <ul>
                  <li class="intop">Home[*]Chi siamo.[*]Album foto del gruppo.[*]Le nostre sessioni.[*]Attrezzatura.[*]Le nostre palline.[*]Forum.[/list]
			</div>
		<div id="corpo" class="myBox">corpo sito
        <div id="slide"></div>
        
  </div>
</div>


</body>
</html>

e ora il CSS3

codice:

@charset "utf-8";
/* CSS Document */

#divsf {
	position:relative;
	margin:0 auto;
	width:715px;
	height:870px;
	z-index:1;
}

#intest {
	background:url(intestazione2.jpg);
	position:absolute;
	left:7px;
	top:-42px;
	width:703px;
	height:105px;
	z-index:2;
}

#lista {
	background:#BFDFFF;
	opacity: 0.7;
	position:absolute;
	left:6px;
	top:87px;
	width:177px;
	height:240px;
	z-index:2;
}
#corpo {
	background-color:#FC3;
	opacity:0.7;
	position:absolute;
	left:214px;
	top:87px;
	width:495px;
	height:730px;
	z-index:2;
}

a {
	z-index:2;
	color:#0067CE;
	font-size:17px;
	font-family:"Arial", Gadget, sans-serif;
	font-style:normal;
	font-weight:bold;
}

li.intop{
	color:#B700B7;
	font-size:17px;
	font-family:"Arial Black", Gadget, sans-serif;
	font-style:normal;
	font-weight:bold;
}

.myBox {
	margin: 0.5in auto; width: 60%; 
	padding: 10px; 
	text-align: left; /* Do rounding (native in Firefox and Safari) */
	-webkit-border-radius: 20px; 
	-moz-border-radius: 20px;
	}
	
body{    /* CSS adatto il body al 100% */
    width: 100%;  
    height: 100%;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
}  
  
#sfondo{ /*Allargo l'immagine a tutto schermo!*/
	z-index:0;
    position:absolute;  
    height:100%;  
    width: 100%;  
    margin: 0;  
    padding: 0;  
}  

#slide {
	background:#000;
	position:absolute;
	left:257px;
	top:8px;
	width:250px;
	height:200px;
	z-index:4;
}

grazie in anticipo

**Vincent.Zeno** · 19-03-2012, 13:24

intanto che sposto in css specifica quali div sono in causa

**corvil90** · 19-03-2012, 14:20

Originariamente inviato da Vincent.Zeno
intanto che sposto in css specifica quali div sono in causa

va bene grazie!
I div in causa sono slide(quello che voglio normale) su corpo(quello trasparente);

**Prill** · 19-03-2012, 18:35

Nel codice html postato non c'è alcun div corpo, puoi usare opacity se usi due div con posizionamenti assoluti non annidati (altrimenti il div interno eredita la trasparenza), oppure più semplicemente usare per il colore di sfondo valori rgba (se cerchi nel forum se ne è parlato tantissime volte)

**corvil90** · 19-03-2012, 20:10

Originariamente inviato da Prill
Nel codice html postato non c'è alcun div corpo, puoi usare opacity se usi due div con posizionamenti assoluti non annidati (altrimenti il div interno eredita la trasparenza), oppure più semplicemente usare per il colore di sfondo valori rgba (se cerchi nel forum se ne è parlato tantissime volte)

CIAO! grazie per la risposta!
si è vero ho sbagliato io il div padre che incorpora gli altri è

codice:

<div id="divsf" class="myBox">

. Il fatto che i div figli ereditassero lo avevo capito, quindi non c'è nessun modo di rendere un div figlio NON trasparente su 'padre trasparente?
Se hai guardato il codice io per provare ho messo un div con sfondo nero... io volevo quello non trasparente!

**corvil90** · 19-03-2012, 20:40

Originariamente inviato da Prill
Nel codice html postato non c'è alcun div corpo, puoi usare opacity se usi due div con posizionamenti assoluti non annidati (altrimenti il div interno eredita la trasparenza), oppure più semplicemente usare per il colore di sfondo valori rgba (se cerchi nel forum se ne è parlato tantissime volte)

CIAO! grazie per la risposta!
si è vero ho sbagliato io il div padre che incorpora gli altri è

codice:

<div id="divsf" class="myBox">

. Il fatto che i div figli ereditassero lo avevo capito, quindi non c'è nessun modo di rendere un div figlio NON trasparente su 'padre trasparente?
Se hai guardato il codice io per provare ho messo un div con sfondo nero... io volevo quello non trasparente!

**LuigiMem** · 20-03-2012, 01:53

ciao scusa ma non ho ben capito chi deve essere trasparente e chi no, quindi ti invio un esempio dove puoi vedere due coppie di div (padre -figlio) esattamente uguali, solo che nel primo il padre è trasparente, nel secondo no..

dovrebbe poterti aiutare..
ciao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="width:300px; height:300px; background-color:rgba(255,0,0,0);">
<div style="width:280px; height:280px; margin:10px; background-color:#000;"></div>
</div>

<div style="width:300px; height:300px; background-color:rgba(255,0,0,1);">
<div style="width:280px; height:280px; margin:10px; background-color:#000;"></div>
</div>
</body>
</html>

**corvil90** · 20-03-2012, 16:18

Originariamente inviato da LuigiMem
ciao scusa ma non ho ben capito chi deve essere trasparente e chi no, quindi ti invio un esempio dove puoi vedere due coppie di div (padre -figlio) esattamente uguali, solo che nel primo il padre è trasparente, nel secondo no..

dovrebbe poterti aiutare..
ciao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="width:300px; height:300px; background-color:rgba(255,0,0,0);">
<div style="width:280px; height:280px; margin:10px; background-color:#000;"></div>
</div>

<div style="width:300px; height:300px; background-color:rgba(255,0,0,1);">
<div style="width:280px; height:280px; margin:10px; background-color:#000;"></div>
</div>
</body>
</html>

Ei ciao grazie per la risposta...
Allego un immagine che mi fara essere piu chiaro.

Il div figlio naturalmente eredita l' opacity del padre... come faccio a mantenerlo non trasparente?
Grazie!

**LuigiMem** · 20-03-2012, 16:24

scusa la domanda ma il div padre "divsf" non è trasparente! Nei "css" postati non vedo ne la trasparenza ne l'opacità?? non capisco come lo rendi trasparente?

fammi capire,
ciao

**corvil90** · 24-03-2012, 15:28

Originariamente inviato da LuigiMem
scusa la domanda ma il div padre "divsf" non è trasparente! Nei "css" postati non vedo ne la trasparenza ne l'opacità?? non capisco come lo rendi trasparente?

fammi capire,
ciao

ciao! grazie mille per la risposta!!!!
Ma ho risolto capendo che i div figli su padre che ha l'opacity ereditano tt l'opacità mentre con padre con colore rgba(...) no!

Discussione: div trasparenti

Strumenti discussione

Ricerca discussione

Visualizza

div trasparenti

Permessi di invio