CSS opacity: gestire la trasparenza degli elementi

Una delle novità più interessanti di CSS3 è la possibilità di gestire la trasparenza degli elementi attraverso la proprietà opacity.

In modo non dissimile da quanto già visto nelle lezioni dedicate alla notazione RGBa e HSLa, la proprietà opacity accetta valori compresi nell’intervallo tra 0.0 (totale trasparenza) e 1.0 (nessuna trasparenza). Il valore di default, ovviamente, è 1.

Facciamo un esempio:

div.a {
  padding: 100px;
  background: url(montagna.jpg) no-repeat;
}
div.b {
  padding: 10px;
  background-color: #FFF;
  color: #000;
  opacity: 0.5;
}

Il risultato sarà il seguente:

A prima vista il risultato potrebbe sembrare lo stesso raggiunto con la proprietà background-color settata con notazione rgba() o hsla(). In realtà non è così! La differenza risulterà evidente se settiamo opacity a 0:

div.b {
  padding: 10px;
  background-color: #FFF;
  color: #000;
  opacity: 0;
}

Ecco il risultato:

Come potete notare ad essere diventato trasparente non è solo il colore di sfondo ma anche il contenuto del box. La differenza è proprio questa: la trasparenza settata mediante la proprietà opacity viene erditata anche dagli elementi figli (in questo caso dal testo contenuto nel box).

Gestire l’opacità su Internet Explorer 8 e precedenti versioni

A partire dalla versione 9 del popolare browser di casa Microsoft, la proprietà opacity è pienamente e correttamente supportata. Nelle versioni precedenti, invece, non è così. Pertanto, per garantire una piena compatibilità cross-browser, è necessario implementare delle regole ad hoc:

Trasparenza su IE 8

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Trasparenza su IE 6 e IE 7

filter: alpha(opacity=50);

Vediamo, quindi, una stilizzazione completa e cross-browser:

div.b {
  padding: 10px;
  background-color: #FFF;
  color: #000;
  /* CSS3 */
  opacity: 0.5;
  /* IE 8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 6 e 7 */
  filter: alpha(opacity=50);
}