Opacity ֆունկցիա

opacity ֆունկցիան թույլ է տալիս փոխել ֆոնային պատկերի թափանցիկությունը: 100% կամ 1 արժեքը թողնում է պատկերի սկզբնական թափանցիկությունը: 0 արժեքը նշանակում է, որ պատկերը կդառնա ամբողջությամբ թափանցիկ: Այս միջակայքում գտնվող ցանկացած թիվ սահմանում է ֆոնի մասնակի թափանցիկություն: Բացասական արժեք հնարավոր չէ սահմանել: Լռելայնով արժեքը հավասար է 1-ի:

Շարահյուսություն

ընտրիչ {
	filter: opacity(թիվ);
}

Օրինակ

Եկեք մեր պատկերի թափանցիկությունը սահմանենք 50%:

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

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

Օրինակ

Իսկ հիմա եկեք սահմանենք թափանցիկությունը 100%:

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

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

Օրինակ

Իսկ հիմա եկեք opacity ֆունկցիայում սահմանենք 0 արժեք:

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

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

Տես նաև

blur ֆունկցիան,
որը թափանցեցնում է ֆոնը
brightness ֆունկցիան,
որը սահմանում է ֆոնի պայծառությունը
contrast ֆունկցիան,
որը սահմանում է ֆոնի կոնտրաստը
drop-shadow ֆունկցիան,
որը սահմանում է ֆոնի ստվերը
hue-rotate ֆունկցիան,
որը սահմանում է ֆոնի գունային տոնը
invert ֆունկցիան,
որը ինվերտում է ֆոնի գույները
sepia ֆունկցիան,
որը վերափոխում է ֆոնը սեպիայի
background հատկությունը,
որը հանդիսանում է ֆոնի համար կրճատ հատկություն
background-image հատկությունը,
որի օգնությամբ բլոկին կարելի է տալ ֆոնային նկար