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

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

ဖွဲ့စည်းပုံ

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

တန်ဖိုးများ

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

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

မှတ်ချက်များ

background-origin ဂုဏ်သတ္တိသည် အလုပ်မလုပ်ပါ၊ background-attachment သည် fixed တန်ဖိုးကို ပိုင်ဆိုင်သောအခါ။ ၎င်းအပြင် background-repeat ၏ တန်ဖိုး repeat တွင် background-origin ဂုဏ်သတ္တိသည် အမြဲတမ်း border-box တန်ဖိုးရှိစဉ်ကဲ့သို့ အလုပ်လုပ်သည်။

ဥပမာ . စံထားရှိသောအတိုင်း

စံထားရှိသောအတိုင်း နောက်ခံသည် နယ်နိမိတ်အောက်သို့ မသွားပါ-

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

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

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

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

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

ယခု နောက်ခံသည် padding မှတစ်ဆင့် ရွှေ့ပြောင်းသွားလိမ့်မည်-

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

ဥပမာ . background-repeat: repeat အခါ

background-repeat ၏ တန်ဖိုး repeat တွင် background-origin ဂုဏ်သတ္တိသည် အမြဲတမ်း border-box တန်ဖိုးရှိစဉ်ကဲ့သို့ အလုပ်လုပ်သည်၊ ဆိုလိုသည်မှာ နောက်ခံသည် အမြဲတမ်း နယ်နိမိတ်အောက်သို့ ဝင်ရောက်သည်-

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

ထပ်မံကြည့်ရှုရန်

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