Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Junior

Veb sahifa yoki saytda CSS sprite'lari qanday amalga oshiriladi?

sobes.tech AI

AIdan javob

CSS sprite'lari bir nechta kichik rasmlarni bir katta faylga (sprite) birlashtirish orqali amalga oshiriladi, so'ngra CSS yordamida bu katta rasmning kerakli qismini sahifa elementlarida ko'rsatish uchun ishlatiladi.

Asosiy bosqichlar:

  1. Sprite yaratish: Birlashtirilishi kerak bo'lgan barcha rasmlar (ikonlar, kichik fonlar va boshqalar) bitta rasmga joylashtiriladi. Bu jarayonni qo'lda grafik tahrirlovchida yoki avtomatik vositalar/generatorlar yordamida qilish mumkin.

  2. CSS qo'llash: Har bir element uchun, unga sprite'dan rasm "joylashtirilishi" uchun quyidagi CSS xususiyatlari belgilanishi kerak:

    • background-image: sprite faylga yo'l ko'rsatiladi.
    • background-repeat: no-repeat;: fon rasmining takrorlanishini o'chiradi.
    • background-position: sprite'ning kerakli qismi uchun yuqori chap burchak koordinatalarini belgilaydi. Bu koordinatalar elementning yuqori chap burchagidan gorizontal va vertikal o'zgarishni ko'rsatadi.
    • width va height: sprite'ning qismi ko'rsatiladigan hududning o'lchamini belgilaydi. Bu o'lchamlar odatda original ikon yoki rasm o'lchamlariga mos keladi.

Ikki ikon uchun sprite'dan foydalanish misoli:

/* Sprite fayli: icons.png */

.icon {
  background-image: url('icons.png'); // Fayl manzili
  background-repeat: no-repeat; // Takrorlamaslik
  width: 32px; // Element kengligi
  height: 32px; // Element balandligi
  display: inline-block; /* yoki boshqa usul bilan elementni blok/inline-block qilish */
}

/* Ikona 1: sprite'da 0, 0 manzilda */
.icon-home {
  background-position: 0 0;
}

/* Ikona 2: sprite'da -40px, 0 manzilda (masalan, ikonlar orasida 8px bo'sh joy bo'lsa) */
.icon-settings {
  background-position: -40px 0;
}

Afzalliklari:

  • HTTP so'rovlar sonini kamaytirish: Bir nechta so'rov o'rniga, brauzer faqat bitta sprite faylni yuklaydi, bu sahifa yuklanish vaqtini qisqartiradi.
  • Keshga olish: Bir katta fayl keshga olinadi, kichiklar o'rniga.

Kamchiliklari:

  • Tuzilma murakkabligi: Rasmlarni qo'shish yoki o'zgartirishda sprite'ni qayta yaratish va CSS koordinatalarini yangilash talab etiladi.
  • Katta yoki juda turlicha rasmlar uchun mos emas.
OldingiKeyingi