CSS Image Sprites

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Kép Sprite

Az image sprite egyetlen képbe helyezett képek gyűjteménye.

A sok képet tartalmazó weboldal betöltése és létrehozása sokáig tarthat több szerver kérés.

A kép sprite használata csökkenti a szerverkérések és mentések számát sávszélesség.

Image Sprites - egyszerű példa

Három különálló kép helyett ezt az egyetlen képet használjuk ("img_navsprites.gif"):

A CSS segítségével a képnek csak azt a részét tudjuk megjeleníteni, amelyre szükségünk van.

A következő példában a CSS határozza meg, hogy az "img_navsprites.gif" melyik része megjelenítendő kép:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

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

</body>
</html>

Példa magyarázata:

<img id="home" src="img_trans.gif">

- Csak egy kis átlátszó képet határoz meg, mert az src attribútum nem lehet üres. A megjelenített kép a CSS-ben megadott háttérkép lesz

width: 46px; height: 44px;

- Meghatározza a kép használni kívánt részét

background: url(img_navsprites.gif) 0 0;

- Meghatározza a háttérképet és annak pozícióját (bal 0px, felül 0px)

Ez a legegyszerűbb módja a kép sprite használatának, most linkekkel és hover effektusokkal szeretnénk bővíteni.

Image Sprites - Navigációs lista létrehozása

A sprite képet ("img_navsprites.gif") szeretnénk használni egy navigációs lista létrehozásához.

HTML listát fogunk használni, mert lehet hivatkozás, és támogatja a háttérképet is:

Példa

#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: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#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: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Példa magyarázata:

#navlist {position:relative;}

- a pozíció relatívra van állítva, hogy lehetővé tegye az abszolút pozicionálást benne

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

- a margó és a kitöltés 0-ra van állítva, a listastílus eltávolítva, és az összes listaelem abszolút pozícióba kerül

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

- az összes kép magassága 44 képpont

Most kezdje el az egyes részek elhelyezését és stílusát:

#home {left:0px;width:46px;}

- Teljesen balra helyezve, a kép szélessége 46 képpont

#home {background:url(img_navsprites.gif) 0 0;}

- Meghatározza a háttérképet és annak pozícióját (bal 0px, felül 0px)

#prev {left:63px;width:43px;}

- 63 képponttal jobbra elhelyezve (#otthon szélessége 46 képpont + némi extra hely az elemek között), a szélessége pedig 43 képpont

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

- Meghatározza a háttérképet 47 képponttal jobbra (#home szélesség 46px + 1px vonal osztó)

#next {left:129px;width:43px;}

- 129 képponttal jobbra elhelyezve (az #előző kezdete 63 képpont + #előző szélessége 43 képpont + extra szóköz), a szélessége pedig 43 képpont

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

- Meghatározza a háttérképet 91 képponttal jobbra (#home szélesség 46px + 1px sorelválasztó + #előző szélesség 43 képpont + 1 képpont sorelválasztó)

Kép Sprite - Lebegő hatás

Most egy lebegtetési effektust szeretnénk hozzáadni a navigációs listánkhoz.

Tipp: A :hover választó minden elemnél használható, nem csak linkeken.

Új képünk ("img_navsprites_hover.gif") három navigációs képet tartalmaz és három kép a lebegési effektusokhoz:

Mivel ez egyetlen kép, és nem hat különálló fájl, nem lesz betöltési késleltetéset, amikor a felhasználó a kép fölé viszi az egérmutatót.

Csak három sor kódot adunk hozzá a lebegési effektus hozzáadásához:

Példa

#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;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

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

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

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Példa magyarázata:

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

- Mindhárom lebegő képhez ugyanazt a háttérpozíciót adjuk meg, csak 45 képponttal lejjebb