- Blog
- Programmazione
- CSS
- CSS3 - Opacità e trasparenza
CSS3 - Opacità e trasparenza
- Programmazione
- CSS
- Giuseppe Ventura
- 20/09/2023
La proprietà opacity specifica l'opacità/trasparenza di un elemento.
Immagine trasparente
La proprietà opacity può assumere un valore compreso tra 0.0 e 1.0. Più basso è il valore, più trasparente è:
img {
opacity: 0.5;
}
Effetto hover trasparente
La proprietà opacity viene spesso utilizzata insieme al selettore :hover per modificare l'opacità al passaggio del mouse:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Spiegazione dell'esempio
Il primo blocco CSS è simile al codice dell'Esempio 1. Inoltre, abbiamo aggiunto cosa dovrebbe accadere quando un utente passa il mouse su una delle immagini. In questo caso vogliamo che l'immagine NON sia trasparente quando l'utente ci passa sopra. Il CSS per questo è opacity:1;.
Quando il puntatore del mouse si allontana dall'immagine, l'immagine tornerà trasparente.
Un esempio di effetto hover invertito:
img:hover {
opacity: 0.5;
}
Casella trasparente
Quando si utilizza la proprietà opacity per aggiungere trasparenza allo sfondo di un elemento, tutti i suoi elementi figlio ereditano la stessa trasparenza. Ciò può rendere difficile la lettura del testo all'interno di un elemento completamente trasparente:
div {
opacity: 0.3;
}
Trasparenza usando RGBA
Se non si vuole applicare l'opacità agli elementi figlio, come nel nostro esempio su indicato, si usano i valori di colore RGBA. L'esempio seguente imposta l'opacità per il colore di sfondo e non per il testo:
Abbiamo imparato dal nostro capitolo sui colori CSS che si può utilizzare RGB come valore di colore. Oltre a RGB, si può utilizzare un valore di colore RGB con un canale alfa (RGBA), che specifica l'opacità di un colore.
Un valore di colore RGBA viene specificato con: rgba(rosso, verde, blu, alfa). Il parametro alfa è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).
Esempio
div {
background: rgba(76, 175, 80, 0.3) /* Sfondo verde con 30% di opacità */
}
Testo in una casella trasparente
Esempio
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Spiegazione dell'esempio
Per prima cosa creiamo un elemento <div> (class=" background") con un'immagine di sfondo e un bordo.
Quindi creiamo un altro <div> (class="transbox") all'interno del primo <div>.
Il <div class="transbox"> ha un colore di sfondo e un bordo: il div è trasparente.
All'interno del <div> trasparente, aggiungiamo del testo all'interno di un elemento <p>.