⌘K

Background-size häsusy

background-size häsusy fon suratynyň ölçegini kesgitleýär. Häsusyň bahasy ölçeg birlikleri ýa-da açar sözler auto, cover ýa-da contain bolup biler.

Sintaksis

cssselektor {
  background-size: baha;
}

Açar sözler

Baha Düşündiriş
auto Fon asyl ölçeginde bolar, şonuň ýaly, fon suratynyň hakyky ölçegi. Eger-de auto diňe bir tarapa berlen bolsa, onda şol tarap boýunça fon, proporsiýalary bozulmaz ýaly massştablaşdyrylar.
cover Suraty proporsiýalary saklap, blokyň tutuşyny özüne oramak üçin massştablaşdyrýar. Surat tutuşlygyna ýerleşmäge synanyşar, ýöne bu hemişe amala aşmaryşlyk mümkin, şonuň üçin onuň bir bölegi kesilip bilner. Blok hemişe surat bilen tutuşlygyna örtüler.
contain Suraty proporsiýalary saklap, bloga tutuşlygyna sypamak üçin massştablaşdyrýar. Bu ýagdaýda ol ýa-da tutuş ini alar, ýa-da tutuş beýikligi (suratyň proporsiýalaryna we elementiň ölçeglerine bagly). Blok, umumy ýagdaýda, surat bilen tutuşlygyna örtülmez (ýöne surat hemişe tutuş görüner, azajyk kiçeldilen bolsa hem).

Belli bir düzgüne görä baha: auto.

Ulanylyşy

Ölçeg birlikleri we auto dürli birleşmelerde ulanylyp bilner, mysal üçin, şeýle: auto 20px, ýa-da 30% 20px, ýa-da auto 30% we ş.m. Bu ýagda birinji parametr fonyň ini boyunça ölçegini kesgitleýär, ikinji parametr bolsa fonyň beýikligi boyunça ölçegini kesgitleýär. Eger bir parametr görkezilen bolsa - onda ol fonyň ölçegini ini we beýikligi boyunça bir wagtda kesgitleýär.

Mysal

Häzir fon suraty öz asyl ölçegine eçe bolar: 

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

Результат:

Mysal

Häzir fon suraty 300px 400px ölçeginde bolar (biziň ýagdaýymyzda proporsiýalary bozular): 

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;
}

Результат:

Mysal

Häzir fon suraty 400px 400px ölçeginde bolar (biziň ýagdaýymyzda proporsiýalary bozular): 

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;
}

Результат:

Mysal

Häzir fon suraty göni tarap boýunça 400px ölçeginde bolar, dik tarap boýunça bolsa onuň ölçegi proporsiýalary bozulmaz ýaly edilip düzüler: 

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;
}

Результат:

Mysal

Häzir fon suraty dik tarap boýunça 400px ölçeginde bolar, göni tarap boýunça bolsa onuň ölçegi proporsiýalary bozulmaz ýaly edilip düzüler: 

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;
}

Результат:

Mysal . Contain bahasy

contain bahasynyň işini serediň: 

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;
}

Результат:

Mysal . Cover bahasy

cover bahasynyň işini serediň: 

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;
}

Результат:

Mysal . Cover işini gowulandyrmak

cover bahasynyň işini gowulandyryp bolýar, eger-de suraty merkezleşdirmek üçin background-position häsusyndan peýdalanylsa (biziň ýagdaýymyzda görünýän böleklere atlaryň kelleleri düşer, kuýrugy däl): 

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;
}

Результат:

Şeýle-de serediň

  • background häsusy,
    fon üçin gysgaldylan häsus
BackBackground-position-y häsiýetiNextblur funksiýasy