background-clip ဂုဏ်သတ္တိ

background-clip ဂုဏ်သတ္တိသည် နောက်ခံအရောင်ဖြည့်ခြင်း သို့မဟုတ် နောက်ခံဓာတ်ပုံတစ်ခုက အစိတ်အပိုင်းတစ်ခုနှင့် ဆက်စပ်၍ မည်ကဲ့သို့ထားရှိမည်ကို သတ်မှတ်ပေးသည်- နယ်နမိတ်အောက်တွင်၊ padding အတွင်း၌သာ သို့မဟုတ် အကြောင်းအရာအပေါ်၌သာ။

ထူးခြားချက်များ

border-box ကို ဖောက်ထွင်းမြင်ရသော နယ်နမိတ်များနှင့် အသုံးပြုပါက နောက်ခံသည် ၎င်းတို့အောက်တွင် မြင်ရလိမ့်မည်
text တန်ဖိုးသည် ပြည့်စုံသော ပံ့ပိုးမှုအတွက် vendor prefixes များ လိုအပ်သည်
ဂုဏ်သတ္တိသည် gradient များနှင့် များပြားသော နောက်ခံများနှင့် အလုပ်လုပ်သည်
border-radius အသုံးပြုပါက နောက်ခံသည် လှည့်ပတ်ထားသောထောင့်များအတိုင်း လှီးဖြတ်ခံရသည်

ဘရောက်ဆာများမှ ပံ့ပိုးမှု

ခေတ်သစ် ဘရောက်ဆာအားလုံးသည် border-box၊ padding-box နှင့် content-box တို့ကို ပံ့ပိုးပေးသည်။ text တန်ဖိုးသည် -webkit- prefix လိုအပ်ပြီး Chrome၊ Safari၊ Edge တို့တွင် ပံ့ပိုးပေးသည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	background-clip: border-box | padding-box | content-box | text;
}

တန်ဖိုးများ

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

စံထားရှိသော တန်ဖိုး- border-box.

ဥပမာ . border-box တန်ဖိုး

နောက်ခံသည် ဖောက်ထွင်းမြင်ရသော နယ်နမိတ်အောက်သို့ ဝင်ရောက်သည်-

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

#elem {
	background-clip: border-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

ဥပမာ . padding-box တန်ဖိုး

နောက်ခံသည် နယ်နမိတ်အောက်သို့ မဝင်ရောက်-

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

#elem {
	background-clip: padding-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.5);
	padding: 30px;
	width: 250px;
	height: 150px;
}

ဥပမာ . content-box တန်ဖိုး

နောက်ခံသည် padding ပေါ်သို့ မဝင်ရောက်-

<div id="elem">
	စာသား စာသား စာသား စာသား စာသား
	စာသား စာသား စာသား စာသား စာသား
	စာသား စာသား စာသား စာသား စာသား
</div>

#elem {
	background-clip: content-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

ဥပမာ . text တန်ဖိုး

နောက်ခံသည် စာသားအတိုင်း လှီးဖြတ်ခံရသည် (-webkit-text-fill-color ကို transparent တန်ဖိုးဖြင့် လိုအပ်သည်)-

<div id="elem">စာသား စာသား စာသား</div>

#elem {
	display: inline-block;
	background: linear-gradient(to right, red, blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	
	font-size: 40px;
	font-weight: bold;
}

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

background ဂုဏ်သတ္တိ,
ဤဂုဏ်သတ္တိသည် နောက်ခံအတွက် အတိုကောက်ဂုဏ်သတ္တိတစ်ခုဖြစ်သည်
background-origin ဂုဏ်သတ္တိ,
နောက်ခံ၏ မူလတည်နေရာကို သတ်မှတ်ပေးသည်