CSS Comment afficher une seule icône d'une matrice pour un élément de liste

Question

Je voudrais utiliser une seule icône d'une matrice d'icônes (avec environ 16 x 16 icônes) comme image de puce pour une liste. Je peux positionner l'image d'arrière-plan avec la position d'arrière-plan et répéter: norepeat. Mais cela affichera toute la ligne du reste de la matrice, donc je cherche un moyen de recadrer l'image de fond. (En utilisant ceci, je peux simplement ajouter différentes lignes de position d'arrière-plan dans mon css pour des états différents comme le hover ouvert, etc.). Il ne doit pas nécessairement s'exécuter sur Internet Explorer. Je cherchais à utiliser du contenu généré mais je ne pense pas qu'il soit impossible de l'utiliser. Prochaine étape Je vais avoir jquery créer un span ou div avant le texte, mais ce serait bien si je peux résoudre cela en utilisant purement css.

Answer 1

HTML

<ul> 
<li><a href="" title="">link#1</a></li> 
</ul> 

CSS

li {background: url(sprite.gif) no-repeat 0 0; padding: 0 0 0 16px;} 
a {text-transform: uppercase;} 

Pour afficher l'icône 2ème au 3ème rang

li {background: url(sprite.gif) no-repeat 16px -48px; padding: 0 0 0 16px;} 

REMARQUE: sprite.gif a 16 icônes, chaque 16x16px, situé dans une matrice 16x16

Answer 2

Je ne pense pas que ce soit possible. CSS3 permet de redimensionner l'image de fond, mais pas recadrer.

Vous devez placer l'image d'arrière-plan dans un conteneur de 16 x 16 pixels.

Answer 3

Vous c un < > étiquette un arrière-plan uni et un remplissage pour masquer ce que vous n'utilisez pas, mais l'inconvénient est que vous ne pouvez pas cliquer sur l'icône.

Answer 4

Vous pouvez soit modifier votre sprite afin que les icônes soient étendues de sorte que, malgré le réglage en tant que bg pour un li entier, les autres icônes ne sont pas affichées.

De:

| | | |

Pour:

|

|

|

|

L'alternative s'appuierait sur un conteneur 16x16 px, comme mentionné.