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

brightness လုပ်ဆောင်ချက်သည် နောက်ခံပုံ၏ တောက်ပမှုကို ပြောင်းလဲရန် ခွင့်ပြုပါသည်။ မူလနောက်ခံ၏ တောက်ပမှုသည် 100% သို့မဟုတ် 1 တန်ဖိုးဖြင့် သတ်မှတ်ပြီး၊ ယင်းတို့ကို လျှော့ချပါက ပုံ၏ တောက်ပမှုလည်း ကျဆင်းသွားပါသည်။ အလားတူပင် တန်ဖိုးကို 100% ထက် မြင့်အောင်တင်ပါက တောက်ပမှု မြင့်တက်လာပါသည်။ အနှုတ်တန်ဖိုးများကို အသုံးမပြုပါ၊ ထို့အပြင် ဗလာတန်ဖိုးကို အလိုအလျောက် 1 အဖြစ် နားလည်ပါသည်။

ဝါကျဖွဲ့ပုံ

selector {
	filter: brightness(number);
}

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ပုံအတွက် တောက်ပမှုကို 20% အဖြစ် သတ်မှတ်ကြပါစို့:

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

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

ဥပမာ

ယခု ပုံ၏ တောက်ပမှုကို 120% အထိ တိုးမြှင့်ကြပါစို့:

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

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

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ပုံအတွက် မူလ တောက်ပမှုကို သတ်မှတ်ကြပါစို့:

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

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

ဤသည်ကိုလည်း ကြည့်ပါ

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