mask-origin ဂုဏ်သတ္တိ

mask-origin ဂုဏ်သတ္တိသည် မျက်နှာဖုံးအတွက် တိုင်းတာရာစမှတ်ကို သတ်မှတ်ပေးသည်။ ၎င်းသည် element ၏ မည်သည့်အပိုင်း (အနားသတ်၊ အတွင်းပိုင်း ချောင်ချာရန် (padding) သို့မဟုတ် အတွင်းပိုင်းအကြောင်းအရာ) နှင့် ဆက်စပ်ပြီး မျက်နှာဖုံးတည်ရှိမည်ကို သတ်မှတ်ပေးပါသည်။

ဖွဲ့စည်းပုံ

selector {
	mask-origin: content-box | padding-box | border-box;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`border-box`	မျက်နှာဖုံးကို element ၏ အနားသတ် (border အပါအဝင်) နှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်။
`padding-box`	မျက်နှာဖုံးကို padding နယ်ပယ် (ပုံမှန်အတိုင်း) နှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်။
`content-box`	မျက်နှာဖုံးကို element ၏ အတွင်းပိုင်းအကြောင်းအရာနှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်။

နမူနာ . border-box

မျက်နှာဖုံးကို element ၏ အနားသတ်နှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

နမူနာ . padding-box

မျက်နှာဖုံးကို ချောင်ချာရန်နယ်ပယ်နှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

နမူနာ . content-box

မျက်နှာဖုံးကို အတွင်းပိုင်းအကြောင်းအရာနှင့် ဆက်စပ်ပြီး တည်နေရာသတ်မှတ်သည်:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

ဒါလဲကြည့်ပါ

mask-clip ဂုဏ်သတ္တိ,
မျက်နှာဖုံးဖြတ်တောက်မှုနယ်ပယ်ကို သတ်မှတ်သည်
mask-position ဂုဏ်သတ္တိ,
မျက်နှာဖုံး၏တည်နေရာကို သတ်မှတ်သည်
mask ဂုဏ်သတ္တိ,
မျက်နှာဖုံးခြင်းဆိုင်ရာ ဂုဏ်သတ္တိအားလုံးအတွက် အတိုကောက်
background-origin ဂုဏ်သတ္တိ,
element ၏နောက်ခံအတွက် အလားတူဂုဏ်သတ္တိ