CSS Sprite - existe-t-il un moyen possible?

E.g. J'ai une image différente de 3 en tant que sprite avec le vol stationnaire.CSS Sprite - existe-t-il un moyen possible?

e.g. for sprite

<div class="sprite normal"></div>

je ne veux pas que ce type!

/* small */ 
    .small{ width:20px; height:20px; } 
    .small .sprite{ background:url(sprite.png) 0 0 no-repeat; } 
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; } 
/* normal*/ 
    .normal{ width:50px; height:50px; } 
    .normal .sprite{ background:url(sprite.png) 0 0 no-repeat; } 
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; } 
/* big */ 
    .big{ width:100px; height:100px; } 
    .big .sprite{ background:url(sprite.png) 0 0 no-repeat; } 
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }

Y a-t-il un moyen? merci ..

Source

2013-09-27 avalkab

Cela semble assez court et organisé pour moi. J'aimerais voir si quelqu'un a des suggestions sur la façon de le raccourcir. +1 – mavrosxristoforos

Je peux faire ça avec jquery mais je me demande, est-ce qu'il y a des css .. – avalkab

Oui, c'est une bonne question, mais je pense que c'est assez organisé, si vous appliquez aussi le changement qu'Amit Ranjan a posté comme réponse. – mavrosxristoforos

.sprite { background: url('sprite.png') 0 0 no-repeat; } 

.small { width: 20px; height: 20px; } 
.small:hover { background-position: 20px 0; } 

.normal { width: 50px; height: 50px; } 
.normal:hover { backgorund-position: 50px 0; } 

.big { width: 100px; height: 100px; } 
.big:hover { background-position: 100px 0 }

Ce sont certainement tous les styles nécessaires, vous n'allez pas pour atteindre votre objectif avec moins de règles.

Source

2013-09-27 09:55:54

hmmm .. quand est-ce possible avec le framework css? – avalkab

Hmm, vous avez raison sur le dernier hover @insertusernamehere, mais je me demande si le css original n'était pas déjà défectueux, car les deux classes sont sur le même élément. –

@avalkab Pourquoi avez-vous besoin de css plus court? Peut-être que si vous pouviez expliquer que nous pourrions cinq une réponse plus complète –

.sprite{ background:url(sprite.png) 0 0 no-repeat; } 

/* small */ 
    .small{ width:20px; height:20px; } 
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; } 

/* normal*/ 
    .normal{ width:50px; height:50px; } 
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; } 

/* big */ 
    .big{ width:100px; height:100px; } 
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }

Source

2013-09-27 09:49:19

noo ... c'est pareil avec partagé mon code. plus court chemin? est possible? par exemple. auto perception? ... – avalkab

Inutile d'écrire la valeur pour background-image et background-repeat plusieurs fois - si vous deviez simplement utiliser background-position dans les règles spécifiques. – CBroe

CSS Sprite - existe-t-il un moyen possible?

Répondre

Questions connexes