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

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

ဝါကျဖွဲ့ပုံ

selector {
	filter: opacity(number);
}

ဥပမာ

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

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

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

ဥပမာ

ယခု အလင်းပေါက်မှုကို 100% အဖြစ် သတ်မှတ်ကြပါစို့:

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

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

ဥပမာ

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

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

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

ဤအကြောင်းကိုလည်း ကြည့်ပါ

blur လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံကို မှုန်ဝါးစေသည်
brightness လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအား တောက်ပမှုကို သတ်မှတ်ပေးသည်
contrast လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအား ကွာဟမှုကို သတ်မှတ်ပေးသည်
drop-shadow လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအား အရိပ်ကို သတ်မှတ်ပေးသည်
hue-rotate လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအား အရောင်သွင်ပြင်ကို သတ်မှတ်ပေးသည်
invert လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအရောင်များကို ပြောင်းပြန်လှန်ပေးသည်
sepia လုပ်ဆောင်ချက်,
အကြောင်းမှာ ၎င်းသည် နောက်ခံကို sepia သို့ ပြောင်းလဲပေးသည်
background property,
အကြောင်းမှာ ၎င်းသည် နောက်ခံအတွက် အတိုကောက် property တစ်ခုဖြစ်သည်
background-image property,
အကြောင်းမှာ ၎င်းကို အသုံးပြု၍ block တစ်ခုအား နောက်ခံပုံကို သတ်မှတ်ပေးနိုင်သည်