CSS opacity
La proprietà CSS3 opacity imposta la trasparenza dell'elemento
La proprietà opacity di CSS3 consente di regolare il livello di trasparenza di un elemento. Il valore può variare da 0 (invisibile) a 1 (completamente visibile), permettendo effetti visivi di sovrapposizione, fade-in/out e layering.
Sintassi
Significato dei valori principali:
-
0: l'elemento è completamente trasparente e non visibile.
-
1: l'elemento è completamente visibile (valore predefinito).
-
Valori decimali tra 0 e 1: controllano il livello di trasparenza in modo graduale.
-
Valori intermedi: Controllano il livello di trasparenza in modo graduale tra 0 e 1: (ad esempio, 0.5, 0.7, 0.2, ecc.)
Esempio proprietà: opacity
Codice Esempio: opacity
.opacity-example {
width: 300px;
height: 200px;
background-color: #007acc;
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;
opacity: 0.5; /* 50% trasparente */
border-radius: 8px;
}
Contenuto Esempio: opacity
Esempio di utilizzo di opacity
In questo esempio, la proprietà opacity viene usata per rendere un elemento parzialmente trasparente:
CSS e HTML per l'elemento con trasparenza:
<style>
.container {
position: relative;
}
.opacity-example {
width: 300px;
height: 200px;
background-color: #007acc;
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;
border-radius: 8px;
}
.opacity-example-2 {
width: 250px;
height: 150px;
background-color: #ff6347;
color: white;
font-size: 20px;
text-align: center;
line-height: 150px;
opacity: 0.5; /* 50% trasparente */
border-radius: 8px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="container">
<div class="opacity-example">
Elemento non trasparente blu
</div>
<div class="opacity-example-2">
Elemento trasparente rosso
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
