Задавање на боја преку rgba во CSS

Покрај форматот rgb постои форматот rgba, кој работи на сличен начин, но со четврти параметар овозможува да се зададе провидноста на бојата. Овој параметар прифаќа децимални вредности од 0 до 1. Притоа, единицата одговара на целосна непровидноста, а нулата - на целосна провидноста.

Ајде да погледнеме на примери.

Пример

За почеток, да направиме ваков непровиден блок:

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); /* црвена боја */
}

Результат:

Пример

Сега да додадеме провидност на текстот:

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); /* црвена провидна */
}

Результат:

Пример

А сега да направиме провидна граница:

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); /* црвена провидна */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Пример

А сега да направиме провидна позадина:

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); /* црна провидна */
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  color: red;
}

Результат:

Практични задачи