hue-rotate လုပ်ဆောင်ချက်

hue-rotate လုပ်ဆောင်ချက်သည် အရောင်စက်ဝိုင်းပေါ်ရှိ အရောင်အသွေးကို လှည့်ခြင်းဖြင့် နောက်ခံပုံရိပ်၏ အရောင်အသွေးကို ပြောင်းလဲခွင့်ပြုသည်။ ဂုဏ်သတ္တိအတွက် တန်ဖိုးများကို အရောင်စက်ဝိုင်း၏ ထောင့်ကိုဖော်ပြသော ဒီဂရီများဖြင့် သတ်မှတ်ပေးရသည်။ တန်ဖိုး 0 သို့မဟုတ် 360 သည် ပုံရိပ်သည် မပြောင်းလဲဘဲ ကျန်ရှိကြောင်း ဖော်ပြပြီး၊ ဤအတိုင်းအတာအတွင်းရှိ မည်သည့်ကိန်းဂဏာန်းမဆို နောက်ခံ၏ အရောင်အသွေးကို ပြောင်းလဲစေသည်။ စံအနေနှင့် တန်ဖိုးမှာ 0deg ဖြစ်သည်။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	filter: hue-rotate(ထောင့်);
}

ဥပမာ

ကျွန်ုပ်တို့၏ ပုံရိပ်အတွက် အရောင်အသွေးကို 150deg နှင့်ညီအောင် သတ်မှတ်ကြပါစို့:

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

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

ဥပမာ

ယခု ပုံရိပ်၏ အရောင်အသွေးကို 50deg နှင့်ညီအောင် သတ်မှတ်ကြပါစို့:

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

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

ဥပမာ

hue-rotate ဂုဏ်သတ္တိတွင် တန်ဖိုးကို မသတ်မှတ်ဘဲ ထားကြည့်ပါစို့:

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

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

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

blur လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို မှုန်ဝါးစေသည်
brightness လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို တောက်ပမှုပေးသည်
contrast လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို ကွာဟမှုပေးသည်
drop-shadow လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို အရိပ်ပေးသည်
invert လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံ အရောင်များကို ပြောင်းပြန်လှန်သည်
opacity လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို ဖြူဝါမှုပေးသည်
sepia လုပ်ဆောင်ချက်၊
အရာ၏ နောက်ခံကို sepia သို့ပြောင်းလဲသည်
background ဂုဏ်သတ္တိ၊
အရာ၏ နောက်ခံအတွက် အတိုကောက် ဂုဏ်သတ္တိဖြစ်သည်
background-image ဂုဏ်သတ္တိ၊
အရာ၏ ဘလောက်တစ်ခုအား နောက်ခံပုံရိပ်ပေးရန် အသုံးပြုသည်
filter ဂုဏ်သတ္တိ၊
အရာ၏ နောက်ခံအတွက် စတိုင်ပေးသည်