Où déclarer/charger des sprites d'image d'arrière-plan pour CSS afin qu'il ne se charge qu'une seule fois?

Question

Je veux utiliser un seul sprite d'image pour ma page web, où devrais-je le déclarer en CSS?
Est-ce que cela devrait être dans le corps ou à quel endroit?

Exemple:

body 
{ 
    background-image:url(/img/sprites.png); 
} 

#someDiv 
{ 
    background-position: -10px -20px; /* can I do this? */ 
} 

#someOtherDiv 
{ 
    background-position: -30px -40px; /* and this? */ 
} 

Je n'ai pas essayé parce que je veux savoir d'abord si cela est possible, alors je vais construire mes sprites.

Merci

Answer 1

Vous désignez exactement la même image pour chaque sélecteur:

a.myLink 
{ 
    background-image: background-image:url(/img/sprites.png); 
} 

a.myLink:hover 
{ 
    /*you don't need to re-define styles for hover elements, unless you want them to change*/ 
    background-position: -50px 0; 
} 

#someOtherDiv 
{ 
    background-image: background-image:url(/img/sprites.png); 
    background-position: -130px -40px; /* and this? */ 
} 

Il n'y a pas "Include global" en CSS, la référence juste dans chaque sélecteur. Il ne sera chargé qu'une seule fois :)