Īpašība opacity

Īpašība opacity iestata elementam daļēju caurspīdīgumu. Ja elementam ir iestatīta daļēja caurspīdīgums, tas nozīmē, ka caur to spīdīs tie elementi, kas atrodas zem tā.

Īpašība kā vērtību pieņem daļskaitli no 0 līdz 1. Šajā gadījumā vērtība 0 ir pilnīga caurspīdīgums, bet vērtība 1 - pilnīga necaurspīdīgums. Starpvērtība, piemēram, 0.3, iestata daļēju caurspīdīgumu. Noklusējuma vērtība: 1.

Sintakse

cssselektors {
  opacity: skaitlis no 0 līdz 1;
}

Piemērs

Šajā piemērā blokam ir pievienota daļēja caurspīdīgums un caur šī bloka robežu un tekstu spīd vecāka elementa fons:

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: red;
  background: black;
  opacity: 0.7;
}

Результат: