Sprite-uri de imagini în CSS

Sprite-uri de imagini CSS

Încărcarea multor imagini face o pagină web mai lentă și generează mai multe cereri către server.

Un sprite de imagine evită asta adunând diverse imagini mici într-un singur fișier mai mare, „imaginea sprite”, aranjată de obicei sub formă de grilă.

Browserul descarcă apoi acel singur fișier în loc de fiecare imagine separat, așa că sunt mai puține cereri către server și se folosește mai puțină lățime de bandă.

Exemplu de sprite-uri de imagini CSS

Două proprietăți CSS sunt esențiale pentru sprite-urile de imagini:

background-image
background-position

În exemplu, CSS-ul alege ce bucată din fișier („img_navsprites.gif”) apare pentru fiecare dintre elementele de navigare (home, next și previous).

Exemplu de sprite-uri de imagini

Exemplu explicat:

width, height - Dimensiunea fiecărei părți de imagine
background-image: url(img_navsprites.gif); - Indică imaginea sprite
background-position - Deplasează imaginea de fundal în interiorul fiecărui element, astfel încât să se vadă doar porțiunea dorită din sprite
<img id="home" src="img_trans.gif"> - Un atribut src gol nu este permis, așa că fiecare imagine începe cu un fișier transparent mic; ce vezi de fapt este imaginea de fundal setată în CSS

Creați o pagină HTML care demonstrează sprite-uri de imagini CSS.

Arătați cum se folosește o imagine sprite ("img_navsprites.gif") pentru a afișa trei pictograme de navigare (home, previous, next) folosind proprietățile CSS background-image și background-position.

Fiecare element ar trebui să folosească o imagine transparentă ca src și să afișeze porțiunea corectă a sprite-ului prin CSS:
- #home: width 46px, height 44px, background-position 0 0
- #prev: width 43px, height 44px, background-position -47px 0
- #next: width 43px, height 44px, background-position -91px 0

> Output: pagină HTML completă

Prompt

Creați o pagină HTML care demonstrează sprite-uri de imagini CSS. Arătați cum se folosește o imagine sprite ("img_navsprites.gif") pentru a afișa trei pictograme de navigare (home, previous, next) folosind proprietățile CSS background-image și background-position. Fiecare element ar trebui să folosească o imagine transparentă ca src și să afișeze porțiunea corectă a sprite-ului prin CSS:

#home: width 46px, height 44px, background-position 0 0
#prev: width 43px, height 44px, background-position -47px 0
#next: width 43px, height 44px, background-position -91px 0

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Sprites Example</title>
<style>
#home {
  width: 46px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: 0 0;
}

#prev {
  width: 43px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: -47px 0;
}

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

<h2>Image Sprites</h2>

<p>An image sprite is a collection of images put into a single image.</p>

<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>

Sprite-uri de imagini într-o listă de navigare

Imaginea sprite („img_navsprites.gif”) poate alimenta și o listă de navigare, iar markup-ul pentru aceasta este construit ca o listă HTML (<ul> și <li>).

Listă de navigare cu sprite-uri

Exemplu explicat:

#navlist {position:relative;} - poziția relative de aici face posibilă poziționarea absolută în interior
#navlist li - margin și padding zero, fără puncte de listă și poziționare absolută pentru fiecare <li>
#navlist li, #navlist a - afișare block și o înălțime de 44px pentru toate imaginile

Apoi fiecare element de navigare primește propria poziție și propriul stil:

#home {left:0px;width:46px;} - Stă complet la stânga, cu o lățime a imaginii de 46px
#home {background:url(img_navsprites.gif) 0 0;} - Setează imaginea de fundal împreună cu locul în care stă (stânga 0px, sus 0px)
#prev {left:60px;} - Stă la 60px de la stânga (lățimea #home de 46px + puțin spațiu suplimentar între elemente)
#prev {background:url('img_navsprites.gif') -47px 0;} - Ia imaginea de fundal de la 47px spre dreapta (lățimea #home de 46px + linia divizoare de 1px)
#next {left:120px;} - Stă la 120px de la stânga (începutul lui #prev la 60px + lățimea #prev de 43px + spațiu suplimentar)
#next {background:url('img_navsprites.gif') -91px 0;} - Ia imaginea de fundal de la 91px spre dreapta (lățimea #home de 46px + linia divizoare de 1px + lățimea #prev de 43px + linia divizoare de 1px)

Creați o pagină HTML care demonstrează utilizarea sprite-urilor CSS de imagini într-o listă de navigare.

Folosiți imaginea sprite ("img_navsprites.gif") într-o listă neordonată HTML (ul și li) pentru a crea o bară de navigare orizontală. Fiecare element de listă trebuie poziționat absolut și trebuie să afișeze o parte diferită a imaginii sprite ca fundal.

Lista de navigare (#navlist) trebuie să folosească poziționare relativă. Fiecare li trebuie poziționat absolut, fără margini, padding sau marcatori. Linkurile și elementele de listă trebuie să aibă înălțimea de 44px și să fie afișate ca elemente block.

Poziționați fiecare element:
- #home: left 0px, width 46px, background position 0 0
- #prev: left 60px, width 43px, background position -47px 0
- #next: left 120px, width 43px, background position -91px 0

> Rezultat: pagină HTML completă
"}, {

Prompt

Creați o pagină HTML care demonstrează utilizarea sprite-urilor CSS de imagini într-o listă de navigare. Folosiți imaginea sprite ("img_navsprites.gif") într-o listă neordonată HTML (ul și li) pentru a crea o bară de navigare orizontală. Fiecare element de listă trebuie poziționat absolut și trebuie să afișeze o parte diferită a imaginii sprite ca fundal. Lista de navigare (#navlist) trebuie să folosească poziționare relativă. Fiecare li trebuie poziționat absolut, fără margini, padding sau marcatori. Linkurile și elementele de listă trebuie să aibă înălțimea de 44px și să fie afișate ca elemente block. Poziționați fiecare element:

#home: left 0px, width 46px, background position 0 0
#prev: left 60px, width 43px, background position -47px 0
#next: left 120px, width 43px, background position -91px 0

Rezultat: pagină HTML completă "}, {

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Navigation List</title>
<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: 60px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

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

<h2>Image Sprites - Navigation List</h2>

<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>

Sprite-uri de imagini - Efect de hover

În continuare, lista de navigare primește un efect de hover.

O imagine nouă („img_navsprites_hover.gif”) conține trei imagini de navigare plus încă trei pentru hover.

Toate cele șase se află într-o singură imagine, nu în fișiere separate, așa că hover-ul nu provoacă nicio întârziere la încărcare.

Efectul are nevoie doar de trei linii de cod.

Efect de hover cu sprite-uri

Exemplu explicat:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Fiecare dintre cele trei imagini de hover refolosește poziția normală de fundal, doar cu 45px mai jos.

Creați o pagină HTML care demonstrează sprite-uri de imagini CSS cu un efect de hover.

Construiți pe baza exemplului cu lista de navigare folosind imaginea sprite ("img_navsprites_hover.gif") care conține trei imagini de navigare și trei imagini pentru efectul de hover, aranjate vertical. Imaginile de hover sunt localizate cu 45px mai jos decât imaginile normale în sprite.

Creați o listă de navigare cu link-uri home, previous și next. Adăugați efecte de hover care deplasează poziția fundalului cu 45px în jos la trecerea cursorului:
- #home a:hover: poziție fundal 0 -45px
- #prev a:hover: poziție fundal -47px -45px
- #next a:hover: poziție fundal -91px -45px

> Output: pagină HTML completă

Prompt

Creați o pagină HTML care demonstrează sprite-uri de imagini CSS cu un efect de hover. Construiți pe baza exemplului cu lista de navigare folosind imaginea sprite ("img_navsprites_hover.gif") care conține trei imagini de navigare și trei imagini pentru efectul de hover, aranjate vertical. Imaginile de hover sunt localizate cu 45px mai jos decât imaginile normale în sprite. Creați o listă de navigare cu link-uri home, previous și next. Adăugați efecte de hover care deplasează poziția fundalului cu 45px în jos la trecerea cursorului:

#home a:hover: poziție fundal 0 -45px
#prev a:hover: poziție fundal -47px -45px
#next a:hover: poziție fundal -91px -45px

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Hover Effect</title>
<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: 60px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 120px;
  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>

<h2>Image Sprites - Hover Effect</h2>

<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>