Esempio
Impostare il livello di opacità per un <div> elemento:
div
{
opacity: 0.5;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà di opacità imposta il livello di opacità di un elemento.
Il livello di opacità descrive il livello di trasparenza, dove 1 non è trasparente a tutti, 0.5 è il 50% see-through, e 0 è completamente trasparente.
| Valore di default: | 1 |
|---|---|
| Inherited: | no |
| animatable: | yes, see individual properties . Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.opacity="0.5" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Nota: IE8 e le versioni precedenti supporti in alternativa, la proprietà del filtro. Come: filter:Alpha(opacity=50) .
CSS Sintassi
opacity:number|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| number | Specifica l'opacità. Da 0,0 (fully transparent) a 1.0 (fully opaque) | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Come utilizzare JavaScript per modificare l'opacità di un elemento:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
} Prova tu stesso " Pagine correlate
CSS tutorial: CSS immagine Opacità / Trasparenza
Di riferimento HTML DOM: opacity property