background-size
Misol
background-image o‘lchamini "auto" bilan va piksellarda belgilang:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
background-size xususiyati fon rasmlarining o‘lchamini belgilaydi.
Bu xususiyat bilan to‘rt xil sintaksisdan foydalanishingiz mumkin: kalit so‘zli sintaksis ("auto", "cover" va "contain"), bir qiymatli sintaksis (rasm kengligini o‘rnatadi (balandlik "auto" bo‘ladi), ikki qiymatli sintaksis (birinchi qiymat: rasm kengligi, ikkinchi qiymat: balandlik) va bir nechta fon uchun sintaksis (vergul bilan ajratiladi).
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.backgroundSize="60px 120px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background-size | 4 | 9 | 4 | 4.1 | 10 |
CSS sintaksisi
background-size: auto|length|cover|contain|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| auto | Standart qiymat. Fon rasmi asl o‘lchamida ko‘rsatiladi | Demo ❯ |
| length | Fon rasmining kengligi va balandligini o‘rnatadi. Birinchi qiymat kenglikni, ikkinchi qiymat balandlikni o‘rnatadi. Agar faqat bitta qiymat berilsa, ikkinchisi "auto" ga o‘rnatiladi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| percentage | Fon rasmining kengligi va balandligini ota elementga nisbatan foizlarda o‘rnatadi. Birinchi qiymat kenglikni, ikkinchi qiymat balandlikni o‘rnatadi. Agar faqat bitta qiymat berilsa, ikkinchisi "auto" ga o‘rnatiladi | Demo ❯ |
| cover | Fon rasmini butun konteynerni qoplaydigan qilib o‘lchamini o‘zgartiradi, hatto buning uchun rasmni cho‘zish yoki chetlaridan birini biroz kesish kerak bo‘lsa ham | Demo ❯ |
| contain | Rasm to‘liq ko‘rinishini ta’minlash uchun fon rasmining o‘lchamini o‘zgartiradi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Fon rasmi o‘lchamini foizlarda belgilang:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}
O‘zingiz sinab ko‘ring »
Misol
Fon rasmi o‘lchamini "cover" bilan belgilang:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
O‘zingiz sinab ko‘ring »
Misol
Fon rasmi o‘lchamini "contain" bilan belgilang:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
O‘zingiz sinab ko‘ring »
Misol
Bu yerda ikkita fon rasmi bor. Birinchi fon rasmining o‘lchamini "contain" bilan, ikkinchi background-image o‘lchamini esa "cover" bilan belgilaymiz:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}
O‘zingiz sinab ko‘ring »
Misol
"Hero" rasm yaratish uchun turli fon xususiyatlaridan foydalaning:
.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS fonlar
HTML DOM ma’lumotnomasi: backgroundSize xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!