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

selector {
	filter: opacity(raqam);
}

Misol

Keling, tasvirimizga 50% shaffoflik belgilaymiz:

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

#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:

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

#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:

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

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

Shuningdek qarang

fonni xiralashtiradigan blur funksiyasi,
fonga yorqinlik beradigan brightness funksiyasi,
fonga kontrastlik beradigan contrast funksiyasi,
fonga soya beradigan drop-shadow funksiyasi,
fonga rangdorlik beradigan hue-rotate funksiyasi,
fon ranglarini inversiyalaydigan invert funksiyasi,
fonni sepia rangiga aylantiradigan sepia funksiyasi,
fon uchun qisqartma xususiyat bo'lgan background xususiyati,
blokka fon tasviri berish uchun ishlatiladigan background-image xususiyati,