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
selektor {
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:
<div id="elem"></div>
#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):
<div id="elem"></div>
#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):
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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ň:
<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>
.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ň:
<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>
.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):
<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>
.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ň
-
backgroundhäsusy,
fon üçin gysgaldylan häsus