hue-rotate ශ්‍රිතය

hue-rotate ශ්‍රිතය පසුබිම් රූපයේ වර්ණ සංතෘප්තිය වර්ණ රවුමක සෙවන භ්‍රමණය කිරීම මගින් වෙනස් කිරීමට ඉඩ සලසයි. දේපලේ අගයන් අංශක වලින් දක්වනු ලැබේ, එය වර්ණ රවුමේ කෝණය දක්වයි. 0 හෝ 360 අගය යනු රූපය නොවෙනස්ව පවතින බව දක්වන අතර, මෙම පරාසය තුළ ඇති ඕනෑම අංකයක් පසුබිමේ සෙවන වෙනස් කිරීමට හේතු වේ. පෙරනිමියෙන් අගය වන්නේ 0deg ය.

වාක්‍ය රීතිය

cssතෝරන්නා {
  filter: hue-rotate(කෝණය);
}

නිදර්ශනය

අපගේ රූපය සඳහා වර්ණ සංතෘප්තිය 150deg ට සමාන කරමු:

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

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

Результат:

නිදර්ශනය

දැන් රූපයේ වර්ණ සංතෘප්තිය 50deg ට සමාන කරමු:

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

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

Результат:

නිදර්ශනය

hue-rotate දේපලේ අගය පැවරීමෙන් වැළකී සිටමු:

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

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

Результат:

මෙයද බලන්න