Функцыя opacity

Функцыя opacity дазваляе змяняць празрыстасць фонавага відарыса. Значэнне 100% або 1 пакідае відарысу зыходную празрыстасць. Значэнне 0 азначае, што відарыс стане цалкам празрыстым. Любы лік размешчаны ў гэтым дыяпазоне задае частковую празрыстасць фону. Адмоўнае значэнне задаваць нельга. Па змаўчанні значэнне роўнае 1.

Сінтаксіс

cssселектар {
  filter: opacity(лік);
}

Прыклад

Давайце ўсталюем празрыстасць нашаму відарысу 50%:

html<div id="elem"></div>

css#elem {
  filter: opacity(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Прыклад

А цяпер давайце ўсталюем празрыстасць 100%:

html<div id="elem"></div>

css#elem {
  filter: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Прыклад

А цяпер давайце зададзім у функцыі opacity значэнне роўнае 0:

html<div id="elem"></div>

css#elem {
  filter: opacity(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Глядзіце таксама