Definirea culorii prin rgba în CSS

Pe lângă formatul rgb, există formatul rgba, care funcționează în mod similar, dar permite ca al patrulea parametru să definească transparența culorii. Acest parametru acceptă valori fracționale de la 0 la 1. În acest caz, unu corespunde opacității complete, iar zero - transparenței complete.

Să ne uităm la exemple.

Exemplul

Pentru început, să facem un bloc opac astfel:

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); /* culoare roșie */
}

Результат:

Exemplul

Acum să adăugăm transparență textului:

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); /* roșu semitransparent */
}

Результат:

Exemplul

Iar acum să facem bordură semitransparentă:

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

Результат:

Exemplul

Iar acum să facem fundal semitransparent:

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

Результат:

Probleme practice