Veb sahifa yoki saytda CSS-rasmlar qanday amalga…

CSS sprite'lar — bu bir nechta rasmlarni bir katta rasmga birlashtirish usulidir. Bu CSS yordamida amalga oshiriladi va katta rasmdan kerakli bo'lakning ko'rinishini background-image, background-position va background-repeat xususiyatlari orqali boshqaradi.

Afzalliklar:

HTTP so'rovlar sonini kamaytirish. Bir nechta kichik rasmlar o'rniga, bitta katta rasm yuklanadi.
Sahifa yuklanishini tezlashtirish. Kamroq so'rovlar, tezroq render.
Trafigni tejash. Umumiy fayl hajmi odatda alohida rasmlarning yig'indisidan kichik bo'ladi.

Amalga oshirish:

Sprite yaratish: Rasmni grafik tahrirlovchilar yoki maxsus onlayn vositalar/kompilyatorlar yordamida birlashtirish (masalan, Webpack bilan css-spritesmith-plugin plaginidan foydalanish).

CSS: Sprite'dan foydalanadigan elementlar uchun quyidagi uslublar qo'llanadi:

.icon {
  background-image: url('path/to/sprite.png'); /* Sprite faylga yo'l */
  background-repeat: no-repeat; /* Rasm takrorlanmaydi */
  display: block; /* yoki inline-block, elementga qarab */
  width: 32px; /* Kerakli ikonaning kengligi */
  height: 32px; /* Kerakli ikonaning balandligi */
}

.icon-home {
  background-position: 0 0; /* "Uy" ikonasi uchun kerakli bo'lakning pozitsiyasi */
}

.icon-settings {
  background-position: -32px 0; /* "Sozlamalar" ikonasi uchun kerakli bo'lakning pozitsiyasi */
}

Berilgan CSS kodida .icon sprite'ni ishlatadigan barcha elementlar uchun umumiy xususiyatlarni belgilaydi. .icon-home va .icon-settings kabi sinflar background-position yordamida sprite ichidagi kerakli rasmning aniq joylashuvini belgilaydi.

Veb sahifa yoki saytda CSS-rasmlar qanday amalga oshiriladi?