mix-blend-mode ဂုဏ်သတ္တိ

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

ဝါကျဖွဲ့ပုံ

selector {
	mix-blend-mode: values;
}

အောက်ပါဇယားတွင် mix-blend-mode ဂုဏ်သတ္တိအတွက် အဓိကတန်ဖိုးများကို ဖော်ပြထားသည်

တန်ဖိုးများ

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

နမူနာ

mix-blend-mode ဂုဏ်သတ္တိ၏ ပုံသေထားရှိသော တန်ဖိုးဖြင့် ပုံတစ်ပုံ၏ပုံပေါက်ပုံကို ကြည့်ရှုကြပါစို့

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

နမူနာ

ယခု ရောစပ် mode ကို အဆမြှင့်သို့ ပြောင်းလဲကြည့်ပါမည်

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

နမူနာ

mix-blend-mode ဂုဏ်သတ္တိကို အပေါ်ယံဖုံးအုပ်ခြင်း တန်ဖိုးသတ်မှတ်ကြည့်ပါစို့

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

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

background ဂုဏ်သတ္တိ,
ဤသည် နောက်ခံအတွက် အတိုကောက်ဂုဏ်သတ္တိတစ်ခုဖြစ်သည်
background-image ဂုဏ်သတ္တိ,
ဤဂုဏ်သတ္တိကို အသုံးပြု၍ ဘလောက်တစ်ခုကို နောက်ခံပုံတစ်ပုံသတ်မှတ်နိုင်သည်
background-blend-mode ဂုဏ်သတ္တိ,
ဤဂုဏ်သတ္တိကို အသုံးပြု၍ နောက်ခံပုံကို နောက်ခံအရောင်ပေါ်သို့ ရောစပ်နိုင်သည်