Impostare il colore tramite rgba in CSS

Oltre al formato rgb, esiste il formato rgba, che funziona in modo analogo ma consente di impostare la trasparenza del colore con un quarto parametro. Questo parametro accetta valori frazionari da 0 a 1. In questo caso, uno corrisponde a opacità completa, mentre zero a trasparenza completa.

Vediamo alcuni esempi.

Esempio

Per cominciare, creiamo un blocco opaco come questo:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0); /* colore rosso */
}

Результат:

Esempio

Aggiungiamo ora trasparenza al testo:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.5); /* rosso semitrasparente */
}

Результат:

Esempio

Ora rendiamo il bordo semitrasparente:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid rgba(255, 0, 0, 0.5); /* rosso semitrasparente */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Esempio

Ora creiamo uno sfondo semitrasparente:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  border: 20px solid red;
  background-color: rgba(0, 0, 0, 0.4); /* nero semitrasparente */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Problemi pratici