utiliser des sprites CSS pour list ( <li> ) image de fond

Question

Est-il possible d'utiliser des sprites CSS pour l'image de fond de la liste? Normalement, je rends mes sprites avec CSS comme ceci:

 .sprite { background: url(sprite.png) no-repeat top left;}
.sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } 
.sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; }

<div class="sprite sprite-checkmark"></div>
 

Est-il possible d'utiliser des sprites pour les puces d'éléments <li>? Il existe des propriétés CSS appelées list-style-image et list-style-position, mais je ne sais pas comment le faire fonctionner sans l'existence de propriétés telles que list-style-image-width et list-style-image-height ainsi que.

Merci.

Answer 1

Vous pouvez aussi utiliser

 li:before {
    background:url(..) no-repeat -##px -##px;
    width:##px;
    height:##px;
    display:block;
    position:absolute;
    content: " ";
    top:##px;
    left:##px;
}
 

et obtenez ainsi un élément supplémentaire ajouté au DOM et donnez-lui l'image de fond.

-Michael

Answer 2

vous pouvez utiliser exactement la même méthode pour créer des sprites CSS dans une liste. Voici un échantillon rapide:

 ul { 
  list-style-type:none;
}

ul li {
  background:url(images/list-image.gif) no-repeat;
  height:24px;
}

ul li.comment {
  background-position: 0 -24px;
  /*Override properties here if you wish */
}
 

Et le html

 <ul>
   <li class="comment">Test</li>
</ul>
 

Vous devrez supprimer la marge / marge de remplissage par défaut avec les styles CSS appropriés. Personnellement, je n’ai jamais vu les éléments list-style-image utilisés auparavant, mais je sais que ce qui précède est une solution courante.

Answer 3

La liste des éléments d'arrière-plan des images via les sprites ont pittfalls, en raison de la variable de la hauteur et la largeur. Pensez aux utilisateurs qui agrandir la taille de police. Maintenant, votre imaginé li hauteur devient heigher que prévu et vos autres sprite images deviennent visibles. Le plus utile pour la liste et les sprites sont lorsque les images sont en haut à gauche. L'empilement des images en diagonale du bas à gauche à en haut à droite donne plus de chance d'empêcher que d'autres sprite éléments pour devenir visible. Vertical de gauche centré sur les images nécessaires fixe la largeur de l'élément extérieur (exemple 800px), et la largeur du sprite images devient que la largeur, la fois le nombre d'images différentes. 10 les différentes marques de graduation fois de 800 px = 8000px large sprite.

Un exemple graphique:

|--------------- 800px -------------|
 |--------------- 800px ------------|

+-------+----------------------------------------------------------------------+
| Img 1 | |
+-------+ |
| |
| |
| |
| +-------+ |
| | Img 2 | |
| +-------+ |
| |
| |
| |
| |
| +-------+
| | Img 3 |
+----------------------------------------------------------------------+-------+

Answer 4

Dans votre élément de liste, vous créez une étendue vide comme ceci:

 <ul>

<li>
<span class="bullet"></span> Example text
</li>

</ul>
 

Dans ton css tu styles comme ça

 .bullet
{
    height: 10px;
    width: 10px;
    position: relative;
    top:2px; /*to align vertically*/
    display: inline-block;
    overflow: hidden;
    background-image: url(/sprite.png);
    background-position: 0 -30px;
}
 

Cela aidera à résoudre le problème de l'augmentation de la taille du texte et de la révélation d'autres sections de l'image-objet par les utilisateurs. J'espère que cela peut aider.

Answer 5

Vous pouvez résoudre ce problème très simplement en plaçant votre image au bas de votre image-objet sans image à droite.