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

background-size ဂုဏ်သတ္တိသည် နောက်ခံပုံ၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးများမှာ မည်သည့် အရွယ်အစားယူနစ်များ ဖြစ်စေ၊ သို့မဟုတ် သော့ချက်စကားလုံးများ ဖြစ်သော auto, cover သို့မဟုတ် contain တို့ ဖြစ်သည်။

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

cssရွေးချယ်သူ {
  background-size: တန်ဖိုး;
}

သော့ချက်စကားလုံးများ

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

အသုံးပြုခြင်း

အရွယ်အစားယူနစ်များနှင့် auto တို့ကို မတူညီသော ပေါင်းစပ်မှုများဖြင့် အသုံးပြုနိုင်သည်၊ ဥပမာ - auto 20px, သို့မဟုတ် 30% 20px, သို့မဟုတ် auto 30% စသည်ဖြင့်။ ဤအခါတွင် ပထမပါရာမီတာသည် နောက်ခံ၏အကျယ်အရွယ်အစားကို သတ်မှတ်ပေးပြီး၊ ဒုတိယပါရာမီတာသည် နောက်ခံ၏အမြင့်အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ပါရာမီတာတစ်ခုသာ သတ်မှတ်ထားပါက၊ ထိုပါရာမီတာသည် နောက်ခံ၏အကျယ်နှင့် အမြင့်နှစ်ခုလုံး၏အရွယ်အစားကို တစ်ပြိုင်နက် သတ်မှတ်ပေးမည်။

ဥပမာ

ယခု နောက်ခံပုံသည် ၎င်း၏ သဘာဝအရွယ်အစားအတိုင်း ရှိနေမည် -

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

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

Результат:

ဥပမာ

ယခု နောက်ခံပုံသည် အရွယ်အစား 300px အပေါ် 400px ရှိမည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် ပုံ၏အချိုး ပျက်စီးသွားမည်) -

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

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

Результат:

ဥပမာ

ယခု နောက်ခံပုံသည် အရွယ်အစား 400px အပေါ် 400px ရှိမည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် ပုံ၏အချိုး ပျက်စီးသွားမည်) -

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

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

Результат:

ဥပမာ

ယခု နောက်ခံပုံသည် အလျားလိုက် 400px အရွယ်အစားရှိမည်၊ ထို့အပြင် ဒေါင်လိုက်အရွယ်အစားမှာ အချိုးမပျက်စေရန် အလိုလျောက်ညှိယူမည် -

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

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

Результат:

ဥပမာ

ယခု နောက်ခံပုံသည် ဒေါင်လိုက် 400px အရွယ်အစားရှိမည်၊ ထို့အပြင် အလျားလိုက်အရွယ်အစားမှာ အချိုးမပျက်စေရန် အလိုလျောက်ညှိယူမည် -

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

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

Результат:

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

contain တန်ဖိုး၏ အလုပ်လုပ်ပုံကို ကြည့်ရှုပါ -

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

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

cover တန်ဖိုး၏ အလုပ်လုပ်ပုံကို ကြည့်ရှုပါ -

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ . cover ၏အလုပ်လုပ်ပုံကို မြှင့်တင်ခြင်း

cover တန်ဖိုး၏ အလုပ်လုပ်ပုံကို မြှင့်တင်နိုင်သည်၊ background-position ဂုဏ်သတ္တိကို အသုံးပြု၍ ပုံကို ဗဟိုချိန်ညှိပေးခြင်းဖြင့် ဖြစ်သည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် မြင်ရသောအပိုင်းများသည် မြင်းများ၏ဦးခေါင်းများကို စတင်ဖော်ပြမည်၊ ၎င်းတို့၏အနောက်ပိုင်းများကို မဟုတ်) -

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

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