Opacity funksiyasi

opacity funksiyasi fon tasvirining shaffofligini o'zgartirish imkonini beradi. 100% yoki 1 qiymati tasvirga asl shaffoflikni saqlab qoladi. 0 qiymati tasvir butunlay shaffof bo'lishini anglatadi. Ushbu diapazonda joylashgan har qanday raqam fonning qisman shaffofligini belgilaydi. Salbiy qiymat berib bo'lmaydi. Standart qiymat 1 ga teng.

Sintaksis

cssselector {
  filter: opacity(raqam);
}

Misol

Keling, tasvirimizga 50% shaffoflik belgilaymiz:

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;
}

Результат:

Misol

Endi esa 100% shaffoflik belgilaymiz:

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;
}

Результат:

Misol

Endi esa opacity funksiyasiga 0 ga teng qiymat beramiz:

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;
}

Результат:

Shuningdek qarang