Posso assegnare la proprietà opacity
alla proprietà background
di un div
solo e non al testo su di esso?
Ho provato:
background: #CCC;
opacity: 0.6;
ma questo non cambia l'opacità.
Sembra che tu voglia usare uno sfondo trasparente, nel qual caso potresti provare ad usare la funzione rgba()
:
rgba(R, G, B, A)
R (rosso), G (verde) e B (blu) possono essere sia
<intero>
s che<percentuale>
s, dove il numero 255 corrisponde al 100%. A (alfa) può essere un<numero>
tra 0 e 1, o una<percentuale>
, dove il numero 1 corrisponde al 100% (piena opacità).
rgba(51, 170, 51, .1) / 10% verde opaco / rgba(51, 170, 51, .4) / 40% verde opaco / rgba(51, 170, 51, .7) / 70% verde opaco / rgba(51, 170, 51, 1) / verde completamente opaco /
Un piccolo [esempio][2] che mostra come può essere usato rgba
.
A partire dal 2018, praticamente **ogni browser supporta la sintassi rgba
.
Il modo più semplice per farlo è con 2 div, 1 con lo sfondo e 1 con il testo:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
Non puoi. Devi avere un div separato che sia solo quello sfondo, in modo da poter applicare l'opacità solo a quello.
Ho provato a farlo di recente, e dato che stavo già usando jQuery, ho trovato la seguente soluzione che è la meno fastidiosa:
testo
un colore di sfondo solido, perché questo sarà il default senza JavaScript.text
e applicatela al div background
.Sono sicuro che c'è una sorta di modo ninja CSS per fare tutto questo con solo i float o qualcosa del genere, ma non ho avuto la pazienza di capirlo.