opacity කාර්යය

opacity කාර්යය පසුබිම් පින්තූරයේ පාරදෘෂ්‍යතාව වෙනස් කිරීමට ඉඩ සලසයි. 100% හෝ 1 අගය පින්තූරයට එහි මුල් පාරදෘෂ්‍යතාව තබා ගනී. 0 අගය අදහස් කරන්නේ, පින්තූරය සම්පූර්ණයෙන්ම පාරදෘෂ්‍ය වන බවයි. මෙම පරාසය තුළ පිහිටි ඕනෑම අංකයක් පසුබිමේ අර්ධ පාරදෘෂ්‍යතාවක් ලබා දෙයි. ඍණ අගයක් ලබා දිය නොහැක. පෙරනිමියෙන් අගය 1 වේ.

වාක්‍ය රචනය

cssතෝරන්නා {
  filter: opacity(අංකය);
}

උදාහරණය

අපි අපේ පින්තූරයට පාරදෘෂ්‍යතාව 50% ලෙස සකසමු:

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

Результат:

උදාහරණය

දැන් අපි පාරදෘෂ්‍යතාව 100% ලෙස සකසමු:

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

Результат:

උදාහරණය

දැන් අපි opacity කාර්යයේ අගය 0 ලෙස සකසමු:

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

Результат:

මෙයද බලන්න