Proprietà Opacity CSS

Question

Ciao sto usando la Proprietà Opacity CSS per un tag div e funziona bene, ma il problema è quando scrivo del testo o incollo immagini su quel tag div che diventano anche dissolvenze. Ho solo bisogno di div back colore per essere sbiadito e non il contenuto div. Il mio codice è ...

#fade div 
{ 
opacity:0.1; 
filter:alpha(opacity=10); /* For IE8 and earlier */ 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

#text in fade div 
{ 
font-weight:bold; 
color:#8A2BE2; 
} 

Grazie !!!

Answer 1

È molto più semplice usare rgba() o un PNG trasparente per lo sfondo.

rgba(0, 0, 0, .1); 
rgba(0, 0, 0); //fallback 

Answer 2

Naturalmente l'opacità vale per gli elementi figlio come well.What si può fare è quello di segragate vostro codice.

<div id='Div-With-Opacity-set'> 
</div> 
<div id='Child-Elements-for-the-above-div'> 
</div> 

Allineare la marcatura con attenzione in modo che il markup assomigli a quello che si desidera.

Answer 3

È possibile utilizzare rgba() immobili per questo:

scrittura come questo:

#fade div 
{ 
background-color: rgba(0,0,0,0.1); 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

Per esempio, si può utilizzare IE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */  zoom: 1; 

è possibile generare il filtro da qui http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 4

Perché non vieni impostare l'opacità allora?

#text in fade div 
{ 
    font-weight:bold; 
    color:#8A2BE2; 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

Answer 5

Basta usare 1px semi trasparente gif e ripeterlo con x e y. Per quanto ne so, è il modo più semplice per impostare lo sfondo semitrasparente.

Answer 6

La tua migliore scommessa senza CSS3 è probabilmente quella di creare un div e mettere un altro div posizionato sopra di esso, ma non annidato al suo interno. Opacity filtra tutti gli elementi all'interno dell'elemento con il set di opacità.

Se metti un div immediatamente a destra, e poi gli dai un margine di -750px; potresti dargli una opacità di 1, ma il div dietro di esso potrebbe avere un'opacità di 0,1, e questo funzionerebbe bene.

Con CSS3 si potrebbe fare questo:

#fade 
{ 
width:750px; 
height:150px; 
background-color: rgba(255,255,255,0.1); 
} 

e solo lo sfondo sarebbe 0,1 opacità. Il testo sarebbe ancora 1.

Ciò che personalmente faccio più spesso, però, è che creo un piccolo file .png con lo sfondo trasparente che desidero, e quindi ho impostato il file .png come sfondo di un elemento. In Photoshop potrei impostare l'opacità dello sfondo bianco su 0.1, quindi salvare un quadrato 50X50, e quindi ho una trasparenza quasi perfetta (no IE6).

Answer 7

qualcosa come http://jsfiddle.net/PWM5f/ avete bisogno