background-blend-mode ပိုင်ဆိုင်မှု

background-blend-mode ပိုင်ဆိုင်မှုသည် နောက်ခံပုံရိပ်ကို နောက်ခံအရောင် သို့မဟုတ် အခြားပုံရိပ်များပေါ်သို့ ပေါင်းစပ်သည့်နည်းလမ်းကို သတ်မှတ်ပေးသည်။ ဤပိုင်ဆိုင်မှုတွင် တန်ဖိုးများစွာကို ကော်မာဖြင့်ခွဲ၍ သတ်မှတ်နိုင်ပြီး၊ ထိုတန်ဖိုးများကို စာရင်းထဲမှ အစဉ်အတိုင်း အသုံးပြုမည်ဖြစ်သည်။ ပိုင်ဆိုင်မှုအတွက် တန်ဖိုးများမှာ ဂရပ်ဖစ်တည်းဖြတ်ရေးဆော့ဝဲများ၏ အဓိက ပေါင်းစပ်နည်းလမ်းများနှင့် ဆင်တူသည်။

ဝါကျဖွဲ့ပုံ

selector {
	background-blend-mode: modes;
}

အောက်ပါဇယားတွင် background-blend-mode ပိုင်ဆိုင်မှုအတွက် အဓိက တန်ဖိုးများကို ဖော်ပြထားသည်။

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`normal`	သာမန်။ အရောင်များကို ရောစပ်ခြင်းမရှိပါ။ ပုံသေ နည်းလမ်းဖြစ်သည်။
`multiply`	မြှောက်ခြင်း။ ဤနည်းလမ်းတွင် အခြေခံအရောင်၏တန်ဖိုးကို ထပ်တိုးအရောင်၏တန်ဖိုးဖြင့် မြှောက်သည်။ ရလဒ်အရောင်သည် အမြဲတမ်း ပိုမိုမှောင်သောအရောင် ဖြစ်လာမည်။
`screen`	ဖျော့ခြင်း။ ဤနည်းလမ်းတွင် အခြေခံနှင့် ထပ်တိုးအရောင်များ၏ ပြောင်းပြန်တန်ဖိုးများကို မြှောက်သည်။ ရလဒ်အရောင်အဖြစ် အမြဲတမ်း ပိုမိုနုသောအရောင် သုံးစွဲသည်။
`overlay`	ဖုံးအုပ်ခြင်း။ ဤနည်းလမ်းတွင် အရောင်များကို အခြေခံအရောင်ပေါ် မူတည်၍ မြှောက်ခြင်း သို့မဟုတ် ဖျော့စေခြင်း ပြုလုပ်သည်။ အဆင်များ သို့မဟုတ် အရောင်များသည် ရှိပြီးသား ပစ်ကယ်များကို ဖုံးအုပ်ထားပြီး အခြေခံအရောင်၏ အလင်းနှင့် အမှောင်အပိုင်းများကို မပြောင်းလဲဘဲထားသည်။

ဥပမာ

background-blend-mode ပိုင်ဆိုင်မှု၏ ပုံသေတန်ဖိုးဖြင့် ပုံရိပ်တစ်ခု မည်သို့ပေါ်လာမည်ကို ကြည့်ကြရအောင်။

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

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

ဥပမာ

ယခု background-blend-mode ပိုင်ဆိုင်မှု၏ တန်ဖိုးကို မြှောက်ခြင်းသို့ ပြောင်းလိုက်ကြပါစို့။

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

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

ဥပမာ

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

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

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

ဆက်လက်ဖတ်ရှုရန်

background ပိုင်ဆိုင်မှု၊
နောက်ခံအတွက် အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခု ဖြစ်သည်။
background-image ပိုင်ဆိုင်မှု၊
အသုံးပြု၍ ဘလောက်တစ်ခုကို နောက်ခံပုံတစ်ပုံ သတ်မှတ်နိုင်သည်။
mix-blend-mode ပိုင်ဆိုင်မှု၊
အသုံးပြု၍ မူလအရောင်များကို နောက်ခံပုံရိပ်ပေါ်သို့ ပေါင်းစပ်နိုင်သည်။
backdrop-filter ပိုင်ဆိုင်မှု၊
ဖျတ်တာများကို ပေါင်းစပ်ခွင့်ပြုသည်။