Kubainisha Rangi Kupitia rgba katika CSS

Licha ya muundo rgb kuna muundo rgba, ambao hufanya kazi kwa njia ile ile, lakini kwa kigezo cha nne huruhusu kubainisha uwazi wa rangi. Kigezo hiki hukubali maadili ya sehemu kutoka 0 hadi 1. Wakati huo huo, kitengo kinalingana na utoashi kamili, na sifuri - uwazi kamili.

Tuangalie kwa mifano.

Mfano

Kwanza, tufanye block isiyo na uwazi kama hii:

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); /* rangi nyekundu */
}

Результат:

Mfano

Sasa tuongeze uwazi wa maandishi:

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); /* nyekundu yenye uwazi */
}

Результат:

Mfano

Sasa tufanye mipaka iwe yenye uwazi:

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

Результат:

Mfano

Sasa tufanye mandharinyuma yawe yenye uwazi:

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

Результат:

Kazi za Vitendo