invert လုပ်ဆောင်ချက်

invert လုပ်ဆောင်ချက်သည် နောက်ခံရုပ်ပုံအတွင်းရှိ အရောင်များကို ပြောင်းပြန်လှန်ရန် ခွင့်ပြုသည်။ 0 ဆိုသည့်တန်ဖိုးသည် ရုပ်ပုံသည် မူလအတိုင်းကျန်ရှိသည်ဟု ဆိုလိုသည်။ 100% သို့မဟုတ် 1 ဆိုသည့်တန်ဖိုးသည် နောက်ခံ၏အရောင်များကို အပြည့်အဝ ပြောင်းပြန်လှန်ပေးသည်။ ဤအတိုင်းအတာအတွင်းရှိ မည်သည့်နံပါတ်ကိုမဆို သတ်မှတ်ပါက အရောင်များကို တစ်စိတ်တစ်ပိုင်း ပြောင်းပြန်လှန်ပေးသည်။ အနုတ်တန်ဖိုးကို သတ်မှတ်၍မရပါ။ စံထားသည့်အတိုင်း တန်ဖိုးသည် 0 ဖြစ်သည်။

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

selector {
	filter: invert(number);
}

နမူနာ

ကျွန်ုပ်တို့၏ ရုပ်ပုံ၏ အရောင်များကို 50% တန်ဖိုးအထိ ပြောင်းပြန်လှန်ကြည့်ကြပါစို့။

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

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

နမူနာ

ယခု ကျွန်ုပ်တို့၏ ရုပ်ပုံ၏ အရောင်များကို 100% တန်ဖိုးအထိ ပြောင်းပြန်လှန်ကြည့်ကြပါစို့။

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

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

နမူနာ

ယခု ကျွန်ုပ်တို့ invert လုပ်ဆောင်ချက်တွင် 0 နှင့်ညီသော တန်ဖိုးကို သတ်မှတ်ကြည့်ကြပါစို့။

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

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

ဆက်လက်လေ့လာရန်

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