background-image
Misol
<body> elementi uchun background-image o‘rnating:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
O‘zingiz sinab ko‘ring »
Misol
<body> elementi uchun ikkita fon rasmini o‘rnating:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
background-image xususiyati element uchun bitta yoki bir nechta fon rasmini o‘rnatadi.
Standart holatda background-image elementning yuqori chap burchagiga joylashtiriladi va vertikal hamda gorizontal yo‘nalishda takrorlanadi.
Maslahat: Elementning foni elementning umumiy o‘lchamini, jumladan ichki bo‘shliq (padding) va chegarani qamrab oladi (lekin tashqi bo‘shliqni (margin) emas).
Maslahat: Rasm mavjud bo‘lmaganda ishlatilishi uchun har doim background-color o‘rnating.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 + CSS3 dagi yangi qiymatlar |
| JavaScript sintaksisi: | object.style.backgroundImage="url(img_tree.gif)" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
background-image: url|none|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| url() | Rasmning URL manzili. Bir nechta rasm belgilash uchun URL manzillarni vergul bilan ajrating | Demo ❯ |
| none | Hech qanday fon rasmi ko‘rsatilmaydi. Bu standart qiymat | |
| conic-gradient() | Fon rasmi sifatida konussimon gradient o‘rnatadi. Kamida ikkita rang belgilang | Demo ❯ |
| linear-gradient() | Fon rasmi sifatida chiziqli gradient o‘rnatadi. Kamida ikkita rang belgilang (yuqoridan pastga) | Demo ❯ |
| radial-gradient() | Fon rasmi sifatida radial gradient o‘rnatadi. Kamida ikkita rang belgilang (markazdan chetlarga) | Demo ❯ |
| repeating-conic-gradient() | Konik gradientni takrorlaydi | Demo ❯ |
| repeating-linear-gradient() | Chiziqli gradientni takrorlaydi | Demo ❯ |
| repeating-radial-gradient() | Radial gradientni takrorlaydi | 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
<body> elementi uchun ikkita fon rasmini o‘rnatadi. Birinchi rasm faqat bir marta ko‘rinsin (no-repeat bilan), ikkinchi rasm esa takrorlansin:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
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 »
Misol
<div> elementi uchun fon rasmi sifatida linear-gradient (ikki rang) o‘rnatadi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementi uchun fon rasmi sifatida linear-gradient (uch rang) o‘rnatadi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}
O‘zingiz sinab ko‘ring »
Misol
repeating-linear-gradient() funksiyasi chiziqli gradientlarni takrorlash uchun ishlatiladi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementi uchun fon rasmi sifatida radial-gradient (ikki rang) o‘rnatadi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementi uchun fon rasmi sifatida radial-gradient (uch rang) o‘rnatadi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}
O‘zingiz sinab ko‘ring »
Misol
repeating-radial-gradient() funksiyasi radial gradientlarni takrorlash uchun ishlatiladi:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS fon, CSS fonlar (kengaytirilgan), CSS gradientlar
HTML DOM ma’lumotnomasi: backgroundImage xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!