Ранггузории ранғ тавассути 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;
}

Результат:

Масъалаҳои амалӣ