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 කාර්යය,
පසුබිම sepia වෙත පරිවර්තනය කරයි
background ගුණය,
පසුබිම සඳහා කෙටි ගුණයක් වේ
background-image ගුණය,
එය භාවිතා කර බ්ලොකයකට පසුබිම් පින්තූරයක් ලබා දිය හැකිය