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

Результат:

ထပ်မံကြည့်ရှုရန်