CSS rasm spraytlari

CSS rasm spraytlari (sprites)

Tasvir sprayti - bu "sprite tasvir" deb ataladigan kattaroq tasvir fayliga joylashtirilgan turli xil kichik tasvirlar to‘plami.

Sprite rasmi odatda to‘rga o‘xshash joylashtiriladi, mana bunday:

Navigation Images

Birdan ortiq rasmli veb-sahifa yuklanishi uzoqroq vaqt oladi va bir nechta server so‘rovini yaratadi.

Demak, har bir rasmini alohida yuklab olish o‘rniga, brauzer bitta sprite rasm faylini yuklaydi — bu server so‘rovlarining sonini va tarmoq bandvidth sarfini kamaytiradi.

CSS image sprites misoli

Rasm sprite’lari uchun ishlatiladigan asosiy CSS xossalari:

Bu yerda CSS kodi turli navigatsiya elementlari (home, next va previous) uchun sprite rasmining ("img_navsprites.gif") qaysi qismi ko‘rsatilishini belgilaydi:

Misol

<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background-image: url(img_navsprites.gif);
background-position: 0 0; /* Top-left corner of the sprite */
}

#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0; /* 47px to the left of the sprite's top-left */
}

#next {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -91px 0; /* 91px to the left of the sprite's top-left */
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

width, height — har bir rasm bo‘lagi kengligi va balandligini belgilaydi
background-image: url(img_navsprites.gif); — rasm sprite manzilini belgilaydi
background-position — fon rasmini har bir element ichida siljitadi, sprite rasmining faqat kerakli qismi ko‘rinsin uchun
<img id="home" src="img_trans.gif"> — Har bir rasm kichik shaffof rasm bilan boshlanadi, chunki src atributi bo‘sh bo‘lishi mumkin emas (ko‘rsatiladigan rasm CSS’da belgilaydigan fon rasmi bo‘ladi)

Navigatsiya ro‘yxatida image spraytlari

Bu yerda sprite rasmidan ("img_navsprites.gif") navigatsiya ro‘yxati ichida foydalanamiz. Navigatsiya ro‘yxati uchun HTML ro‘yxatidan (<ul> va <li>) foydalanamiz:

Misol

#navlist {
  position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 60px;
width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 120px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

#navlist {position:relative;} - uning ichida mutlaq joylashishni ta’minlash uchun pozitsiya nisbatan o‘rnatiladi
#navlist li — margin va padding‘ni 0 qilish, nuqtalarni olib tashlash va barcha <li> larni absolyut joylashtirish
#navlist li, #navlist a — barcha rasmlar balandligini 44px qilib, blok sifatida ko‘rsatish

Endi har bir navigatsiya elementini joylashtiring va ushlab keling:

#home {left:0px;width:46px;} — butunlay chapga joylashtirilgan va rasm kengligi 46px
#home {background:url(img_navsprites.gif) 0 0;} — fon rasmi va uning joylashuvini belgilaydi (chap 0px, yuqori 0px)
#prev {left:60px;} — 60px o‘ngga joylashtirilgan (#home kengligi 46px + elementlar orasida qo‘shimcha joy)
#prev {background:url('img_navsprites.gif') -47px 0;} — fon rasmini 47px o‘ngga belgilaydi (#home kengligi 46px + 1px ajratgich chiziq)
#next {left:120px;} — 120px o‘ngga joylashtirilgan (#prev boshlanishi 60px + #prev kengligi 43px + qo‘shimcha joy)
#next {background:url('img_navsprites.gif') -91px 0;} — fon rasmini 91px o‘ngga belgilaydi (#home kengligi 46px + 1px ajratgich + #prev kengligi 43px + 1px ajratgich)

Image spraytlari — hover effekti

Endi navigatsiya ro‘yxatimizga hover effekti qo‘shmoqchimiz.

Yangi rasmingiz ("img_navsprites_hover.gif") uchta navigatsiya rasmi va hover effektlari uchun uchta rasmdan iborat:

Navigation Image with hover

Bu bitta yagona rasm bo‘lgani uchun — oltita alohida fayl emas — foydalanuvchi rasm ustiga sichqoncha olib borganda yuklanish kechikishi bo‘lmaydi.

Hover effektini qo‘shish uchun faqat uch qator kod qo‘shamiz:

Misol

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} — barcha uchta hover rasmi uchun bir xil fon joylashuvini ko‘rsatamiz, faqat 45px pastroqda

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish