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

background-position ဂုဏ်သတ္တိသည် အစိတ်အပိုင်းတစ်ခု၏နောက်ခံပုံ၏တည်နေရာကို သတ်မှတ်ပေးသည်။ တည်နေရာကို မည်သည့် အရွယ်အစားအတွက်ယူနစ် ဖြင့်မဆို သတ်မှတ်နိုင်ပါသည်။ ပထမတန်ဖိုးသည် ဘယ်ဘက်မှ အကွာအဝေး၊ ဒုတိယတန်ဖိုးသည် အပေါ်မှ အကွာအဝေးကို ဖော်ပြသည်။

သော့ချက်စကားလုံးများဖြင့်လည်း တည်နေရာသတ်မှတ်နိုင်ပါသည်။ ဤအခြေအနေတွင် တန်ဖိုးများ၏အစဉ်သည် အရေးမကြီးပါ။ ဒေါင်လိုက်အတွက် သော့ချက်စကားလုံးများ- top, center, bottom။ အလျားလိုက်အတွက် သော့ချက်စကားလုံးများ- left, center, right.

သော့ချက်စကားလုံးများကို အသုံးပြုနည်း

ပုံ၏တည်နေရာကို သော့ချက်စကားလုံးဖြင့် သတ်မှတ်ရန်၊ ဒေါင်လိုက်အတွက် တန်ဖိုးတစ်ခုနှင့် အလျားလိုက်အတွက် တန်ဖိုးတစ်ခု ထည့်သွင်းရန်လိုအပ်သည်။ ဥပမာအားဖြင့်၊ top right ဟုသတ်မှတ်ပါက ပုံသည် ညာဘက်အပေါ်မှာရှိသွားမည်။

စကားလုံးများ၏အစဉ်သည် အရေးမကြီးပါ- top right ဟုရေးသားနိုင်သကဲ့သို့၊ right top ဟုလည်းရေးသားနိုင်သည်။ သော့ချက်စကားလုံး center ပါဝင်ပါက ၎င်းကို ချန်လှပ်ထားနိုင်သည်။ ဥပမာ၊ top center သည် top တစ်ခုတည်းနှင့် အတူတူပင်ဖြစ်သည်။ center center သည် center တစ်ခုတည်းနှင့် အတူတူပင်ဖြစ်သည်။

Syntax

cssselector {
  background-position: နှစ်ခုသော တန်ဖိုးများကို ခြားနားချက်ဖြင့်;
}

ဥပမာ

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

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

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို အပေါ်ဘက် ညာဘက်ထောင့်သို့ နေရာချကြပါစို့-

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

css#elem {
  background-position: top right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို အောက်ဘက် ညာဘက်ထောင့်သို့ နေရာချကြပါစို့-

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

css#elem {
  background-position: bottom right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ညာဘက်နှင့် ဒေါင်လိုက်ဗဟိုသို့ နေရာချကြပါစို့-

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

css#elem {
  background-position: right center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ဘလောက်၏ဗဟိုသို့ နေရာချကြပါစို့-

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

css#elem {
  background-position: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ဘယ်ဘက်မှ 20px အကွာအဝေးနှင့် အပေါ်မှ 40px အကွာအဝေးတွင် နေရာချကြပါစို့-

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

css#elem {
  background-position: 20px 40px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ဘယ်ဘက်မှ 90% အကွာအဝေးနှင့် အပေါ်မှ 100% အကွာအဝေးတွင် နေရာချကြပါစို့-

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

css#elem {
  background-position: 90% 100%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ဘယ်ဘက်မှ 30px အကွာအဝေးနှင့် ဒေါင်လိုက်အောက်ဘက်တွင် နေရာချကြပါစို့-

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

css#elem {
  background-position: 30px bottom;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို ဘယ်ဘက်မှ 30px အကွာအဝေးနှင့် ဒေါင်လိုက်ဗဟိုတွင် နေရာချကြပါစို့-

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

css#elem {
  background-position: 30px center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

နောက်ခံပုံကို အပေါ်မှ 30px အကွာအဝေးနှင့် အလျားလိုက်ဗဟိုတွင် နေရာချကြပါစို့-

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

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

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