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

background-repeat ဂုဏ်သတ္တိသည် အစိတ်အပိုင်းတစ်ခု၏ နောက်ခံပုံကို မည်သို့ထပ်ခါထပ်ခါဖော်ပြရမည်ကို သတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့် ပုံသည် X ဝင်ရိုးနှင့် Y ဝင်ရိုးနှစ်ခုစလုံးတွင် ထပ်ကျော့သည်၊ ထိုသို့ဖြင့် ရနိုင်သောနေရာတစ်ခုလုံးကို ဖုံးအုပ်ထားသည်။

ဝါကျဖွဲ့ပုံ

cssselector {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

တန်ဖိုးများ

ပုံသေတန်ဖိုး: repeat - ဖန်သားပြင်တစ်ခုလုံးကို အဆင်တစ်ခုဖြင့် ဖုံးအုပ်ထားသည်။

နမူနာ

ပုံသေအားဖြင့် နောက်ခံပုံသည် ၎င်းကိုယ်တိုင် အစိတ်အပိုင်းတစ်ခုလုံးကို ဖုံးအုပ်ပေးမည်-

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

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

Результат:

နမူနာ

ပုံသည် ထပ်ခါထပ်ခါ မဖော်ပြရန် လုပ်ဆောင်ကြပါစို့-

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

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

Результат:

နမူနာ

ယခုတော့ ပုံသည် X ဝင်ရိုးတလျှောက် ထပ်ခါထပ်ခါဖော်ပြပါစေ-

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

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

Результат:

နမူနာ

ယခုတော့ Y ဝင်ရိုးတလျှောက်-

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

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

Результат:

နမူနာ

ဝင်ရိုးများတလျှောက် ထပ်ခါထပ်ခါဖော်ပြသော ပုံများကို background-position ဂုဏ်သတ္တိဖြင့် တည်နေရာသတ်မှတ်ပေးနိုင်သည်-

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

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

Результат:

နမူနာ

space တန်ဖိုး မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရှုကြပါစို့-

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

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

Результат:

နမူနာ

round တန်ဖိုး မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရှုကြပါစို့-

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

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

Результат:

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