Proprietà CSS opacity
La proprietà CSS opacity imposta il livello di trasparenza di un elemento. Prova gli esempi e osserva i risultati.
La proprietà CSS opacity imposta la trasparenza di un elemento. Controlla l'intero elemento — testo, sfondo, bordi e tutti gli elementi figli sbiadiscono insieme. È una delle proprietà CSS3.
Usa opacity quando vuoi che un elemento (e tutto ciò che contiene) appaia sbiadito: per attenuare un pulsante inattivo, creare un effetto hover o sovrapporre una filigrana al contenuto.
Come funziona il valore di opacity
Il valore è un numero compreso tra 0 e 1:
0— l'elemento è completamente trasparente (invisibile, ma occupa ancora spazio e rimane interattivo).1— valore predefinito, l'elemento è completamente opaco.- Qualsiasi valore intermedio, come
0.5, rende l'elemento parzialmente trasparente. Valori più bassi significano maggiore trasparenza.
Nei browser moderni è possibile esprimere il valore anche come percentuale, dove 50% equivale a 0.5.
I valori negativi non sono validi e vengono limitati — il browser interpreta qualsiasi valore inferiore a 0 come 0 e qualsiasi valore superiore a 1 come 1.
Opacity influisce anche sugli elementi figli. Quando si attenua un elemento genitore, ogni figlio viene attenuato con esso, e non è possibile rendere di nuovo completamente opaco un figlio assegnandogli opacity: 1. Se vuoi uno sfondo semitrasparente mantenendo testo e figli solidi, usa un colore RGBA su background-color — ad esempio background-color: rgba(142, 191, 66, 0.3).
Un elemento con un valore di opacity inferiore a 1 crea un nuovo contesto di impilamento. Questo può modificare il modo in cui si sovrappone agli elementi vicini, quindi un elemento attenuato può apparire sopra o sotto i suoi fratelli in modo diverso da quanto ci si aspetta.
| Valore iniziale | 1.0 |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | object.style.opacity = "0.3"; |
Sintassi
Sintassi CSS di opacity
opacity: number | initial | inherit;Esempio della proprietà opacity:
Esempio di codice CSS con opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Risultato
Nell'esempio seguente, il livello di opacity della prima immagine è 1.0, la seconda immagine è 0.6 e la terza immagine è 0.2.
Esempio della proprietà opacity con tre livelli di trasparenza:
Altro esempio di codice CSS con opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity: 1.0;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>Opacity vs. sfondi RGBA
Un errore comune è usare opacity quando si vuole solo uno sfondo semitrasparente. Poiché opacity attenua anche i figli, il testo all'interno di un riquadro diventa anch'esso sbiadito e più difficile da leggere. Un colore di sfondo RGBA applica la trasparenza solo al colore di sfondo, lasciando il testo completamente opaco:
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Per controllare il colore del riquadro stesso, consulta background-color.
Dissolvenza al passaggio del mouse
Poiché opacity è animabile, si abbina naturalmente a transition per creare effetti di dissolvenza fluidi, come attenuare un'immagine finché l'utente non ci passa sopra con il mouse:
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}Opacity vs. visibility e display
opacity: 0, visibility: hidden e display: none nascondono tutti un elemento, ma si comportano in modo diverso:
| Dichiarazione | Visibile | Occupa spazio | Cliccabile |
|---|---|---|---|
opacity: 0 | No | Sì | Sì |
visibility: hidden | No | Sì | No |
display: none | No | No | No |
Un elemento con opacity: 0 è invisibile ma risponde ancora ai clic, quindi aggiungi pointer-events: none se hai bisogno che sia non interattivo.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| number | Definisce il livello di opacity. Il valore predefinito è 1.0. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |