Invert funktsiyasi

invert funktsiyasi fon rasmidagi ranglarni inversiyalash imkonini beradi. 0 qiymati rasm o'zgarishsiz qolishini bildiradi. 100% yoki 1 qiymati fon ranglarini to'liq inversiyalaydi. Ushbu oralig'idagi har qanday raqam ranglarni qisman inversiyalaydi. Salbiy qiymat berib bo'lmaydi. Standart qiymat 0 ga teng.

Sintaksis

selector {
	filter: invert(son);
}

Misol

Keling, rasmimizning ranglarini 50% qiymatigacha inversiyalaymiz:

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

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

Misol

Endi esa, rasmimizning ranglarini 100% qiymatigacha inversiyalaymiz:

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

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

Misol

Endi esa, invert funktsiyasiga 0 ga teng qiymat beramiz:

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

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

Shuningdek qarang

fonni xiralashtiradigan blur funktsiyasi
fonga yorqinlik beradigan brightness funktsiyasi
fonga kontrastlik beradigan contrast funktsiyasi
fonga soya beradigan drop-shadow funktsiyasi
fonga rang tusini o'zgartiradigan hue-rotate funktsiyasi
fonga shaffoflik beradigan opacity funktsiyasi
fonni sepia rangiga o'zgartiradigan sepia funktsiyasi
fon uchun qisqartma xususiyat bo'lgan background xususiyati
blokka fon rasm berish uchun ishlatiladigan background-image xususiyati
fon uchun uslub belgilaydigan filter xususiyati