Sobes.tech
Кӯмаки мусоҳиба
Захираҳо
Тайёрии мусоҳиба
Захираҳо
Ҷустуҷӯи кор
Захираҳо
Ҳуқуқӣ
Бозгашт ба саволҳо
Junior

Чӣ гуна CSS-спрайтҳо дар саҳифа ё сайт татбиқ мешаванд?

sobes.tech AI

Ҷавоб аз AI

CSS-спрайтҳо тавассути пайваст кардани чанд тасвир ба як тасвири калон амалӣ мешаванд. Тасвири бадастомада ҳамчун фон барои унсурҳои гуногун дар саҳифа истифода мешавад ва ҷойгиркунии минтақаи намоён (спрайт) дар дохили ин тасвир бо истифода аз хусусиятҳои background-image ва background-position анҷом дода мешавад.

Раванди амалӣ кардан аз қадамҳои зерин иборат аст:

  1. Пайваст кардани тасвирҳо: чанд тасвири хурд (иконҳо, тугмаҳо, қисмҳои интерфейс) бо истифода аз таҳриргари графикӣ ё асболи махсус барои сохтани спрайтҳо ба як файл (масалан PNG ё JPG) пайваст карда мешаванд.

  2. Муайян кардани андозаҳо ва ҷойгиркунӣ: Барои ҳар як тасвир дар дохили спрайт андозаҳои он (дарозӣ ва баландӣ) ва ҷойгиркунии он (ҳисобҳои болоӣ ва чапӣ) муайян карда мешаванд.

  3. Истифодаи услубҳои CSS: Дар CSS услубҳо барои унсурҳое, ки спрайтро истифода мебаранд, муайян карда мешаванд.

    • background-image: роҳро ба файл нишон медиҳад.
    • background-repeat: ба no-repeat гузошта мешавад, то такрор кардани тамоми спрайт пешгирӣ шавад.
    • width ва height: андозаҳои минтақаи намоёнро муайян мекунанд.
    • background-position: қисми спрайтро, ки бояд намоён бошад, муайян мекунад. Арзиш (масалан, 0 0, -50px 0, center top) ҷойгиркунии кунҷи болоии чапи минтақаи намоёнро нисбат ба кунҷи болоии чапи спрайт нишон медиҳад.

Масалан истифода:

/* Услубҳо барои спрайти умумӣ */
.sprite {
  background-image: url('path/to/your/sprite.png'); /* Роҳи файл спрайт */
  background-repeat: no-repeat; /* Нест кардани такрор */
  display: inline-block; /* Ё дигар намуди мувофиқ */
}

/* Услубҳо барои иконҳои мушаххас */
.icon-home {
  width: 32px; /* Дарозии икони "хона" */
  height: 32px; /* Баландии икони "хона" */
  background-position: 0 0; /* Ҷойгиркунии икони "хона" дар спрайт */
}

.icon-settings {
  width: 24px; /* Дарозии икони "танзимот" */
  height: 24px; /* Баландии икони "танзимот" */
  background-position: -40px 0; /* Ҷойгиркунии икони "танзимот" дар спрайт (тарҳрезии X) */
}

Дар HTML, унсурҳои мувофиқ бо синфи .sprite ва синфи махсус барои икони лозим хоҳанд буд:

<span class="sprite icon-home"></span>
<span class="sprite icon-settings"></span>

Афзалиятҳои CSS-спрайтҳо:

  • Кам кардани шумораи дархостҳои HTTP: Як тасвири калон ба ҷои чанд тасвири хурд бор карда мешавад.
  • Тезтар боркунии саҳифа: Камтар дархостҳо = зудтар боркунӣ.
  • Кэшбардорӣ: Тасвири спрайт метавонад дар кеши браузер нигоҳ дошта шавад, ки ба такрори боздидҳо суръат мебахшад.

Норасоиҳо:

  • Мушкилоти нигоҳдорӣ: Тағйирот ё илова кардани як тасвир талаб мекунад, ки тамоми спрайт навсозӣ ва CSS-ро нав кардан лозим аст.
  • Мушкилот бо тарҳи ҷавобгӯ: Меъёрсозии спрайтҳо метавонад мушкил бошад.
  • Ҳаҷми файл: Агар спрайт бисёр ё тасвирҳои калон дошта бошад, андозаи он метавонад назаррас шавад.

Дар рушди пешрафтаи фронтенд, одатан истифодаи асбобҳо барои автоматизатсия кардани сохтани спрайтҳо ё дигар техникаҳо, масалан SVG спрайтҳо ё истифодаи ҳарфҳои нишони, ки дорои манфиатҳои худ мебошанд, маъмул аст.

ГузаштаОянда