Функција 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;
}

Результат:

Погледајте такође