web-dev-qa-db-fra.com

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

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.

htmlcsscss-sprites
35
Emmett

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.

52
designitsimple

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

18
Mig

Les éléments de la liste des images d'arrière-plan via les images-objets présentent des chutes de poids dues à des hauteurs et des largeurs variables. Pensez aux utilisateurs qui agrandissent leur taille de police. Maintenant, votre hauteur de li imaginée devient plus haute que prévu et vos autres images Sprite deviennent visibles. Les plus utiles pour les listes et les images-objets sont lorsque les images sont alignées en haut à gauche. L'empilement des images en diagonale du bas à gauche au haut à droite permet d'éviter que d'autres éléments Sprite ne deviennent visibles. Les images centrées verticalement à gauche requièrent une largeur fixe de l'élément extérieur (exemple 800px) et la largeur des images Sprite devient cette largeur, multipliée par le nombre d'images différentes. 10 ticks différents fois 800 px = 8000px de large Sprite.

Un exemple graphique:

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

 + ------- + ----- -------------------------------------------------- --------------- + 
 | Img 1 | | 
 + ------- + | 
 | | 
 | | 
 | | 
 | + ------- + | 
 | | Img 2 | | 
 | + ------- + | 
 | | 
 | | 
 | | 
 | | 
 | + ------- + 
 | | Img 3 | 
 + ------------------------------------------- --------------------------- + ------- +
10
Pro Backup

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 des utilisateurs qui augmentent la taille du texte et révèlent d’autres sections du Sprite. J'espère que cela peut aider.

8
ctrombley

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

1
user3004751

Je pense que l’utilisation de csssprites «traditionnels» est trop risquée - comme l’a souligné @Pro Backup.

C’était le meilleur compromis pour moi… .. Vous avez mis l’image au format base64 et un style de repli standard pour les [très] anciens navigateurs. De cette façon, vous n'avez qu'une seule demande de css. Une puce codée typique ne devrait contenir que quelques centaines d'octets.

li
{
    list-style: square;
    list-style-image: url(data:image/png;base64,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);
}

Voir le:http://jsfiddle.net/VThLq/1/

0
Simon_Weaver

vous pouvez utiliser un style dans le ul pour accomplir la même chose.

ul {
list-style:square url(../images/whatever.png);
}
0
gumbar