Функция opacity

Функция opacity фон расмининг шaffофлигини ўзгартириш имконини беради. 100% ёки 1 қиймати расмга бошланғич шaffофликни қолдиради. 0 қиймати расм тулиқ шaffоф бўлишини англатади. Бу даврада жойлашган ҳар қандай рақам фоннинг қисман шaffофлигини белгилайди. Салбий қиймат бериб бўлмайди. Донда қиймат 1 га тенг.

Синтаксис

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

Мисол

Келинг, бизнинг расмимизга шaffофликни 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;
}

Результат:

Мисол

Энди эса шaffофликни 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;
}

Результат:

Шунингдек қаранг