Especificar color mediante rgba en CSS

Además del formato rgb, existe el formato rgba, que funciona de manera similar, pero como cuarto parámetro permite especificar la transparencia del color. Este parámetro toma valores fraccionarios de 0 a 1. Donde uno corresponde a opacidad completa, y cero - a transparencia completa.

Veamos algunos ejemplos.

Ejemplo

Para empezar, hagamos un bloque opaco como este:

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); /* color rojo */
}

Результат:

Ejemplo

Ahora agreguemos transparencia al texto:

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); /* rojo semitransparente */
}

Результат:

Ejemplo

Y ahora hagamos un borde semitransparente:

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); /* rojo semitransparente */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Ejemplo

Y ahora hagamos un fondo semitransparente:

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); /* negro semitransparente */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Problemas prácticos