Kleur toegeken deur rgba in CSS

Benewens die rgb formaat, bestaan daar die rgba formaat, wat op 'n soortgelyke manier werk, maar met 'n vierde parameter laat dit jou toe om deursigtigheid vir die kleur te spesifiseer. Hierdie parameter aanvaar breukwaardes van 0 tot 1. Hier is een gelykstaande aan volle ondeursigtigheid, en nul - volle deursigtigheid.

Kom ons kyk na voorbeelde.

Voorbeeld

Laat ons eers so 'n ondeursigtige blok maak:

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); /* rooi kleur */
}

Результат:

Voorbeeld

Laat ons nou deursigtigheid by die teks voeg:

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); /* rooi deursigtig */
}

Результат:

Voorbeeld

En laat ons nou 'n deursigtige rand maak:

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

Результат:

Voorbeeld

En laat ons nou 'n deursigtige agtergrond maak:

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

Результат:

Praktiese take