Comment puis-je évoluer une image dans un sprite CSS

Question

Dans cet article, http://css-tricks.com/css-sprites/, il parle de comment puis-je culture une image plus petite de 1 image plus grande. Pouvez-vous svp me dire si il est possible de/comment je peux le culture une image plus petite échelle et puis le coupé de la région avant de me jeter dehors?

Voici un exemple de cet article:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

Je voudrais savoir comment puis-je l'échelle de l'image après je récolte à partir de spriteme1.png

Voici l'URL de l'exemple: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Donc je voudrais savoir si je peux faire les icônes à côté Item 1,2,3,4 petits?

Answer 1

Vous pouvez utiliser background-size si cela fonctionne pour vous, comme son non pris en charge dans tous les navigateurs.

Ou

Vous pouvez utiliser un combo de zoom pour webkit/ie et transform : échelle pour Firefox(-moz-) et Opera(-o-) pour mobile & Bureau multi-navigateurs

Answer 2

Lorsque vous utiliser des sprites, vous êtes limité par les dimensions de l'image dans le sprite. L' background-size d'une propriété CSS, mentionné par Stephen, n'est-ce pas largement encore prise en charge et peut provoquer des problèmes avec les navigateurs comme IE8 et ci-dessous - et compte tenu de leur part de marché, ce n'est pas une option viable.

Une autre façon de résoudre le problème est d'utiliser deux éléments et l'échelle de l'sprite en l'utilisant avec un img balise, comme ceci:

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

De cette façon, l'élément extérieur (div.sprite-image) est rognage d'une 20x20px image de l' img balise, qui agit comme une échelle d' background-image.

Answer 3

Essayez ceci: http://tobyj.net/responsive-sprites/ (démonstration et explication)

Cette méthode échelles des sprites de manière responsable", de sorte que la largeur/hauteur de l'ajuster en fonction de votre navigateur, la taille de la fenêtre. Il n'est pas utiliser background-size comme support dans les navigateurs plus anciens, est inexistant.

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

Answer 4

essayez d’utiliser la taille de fond : http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

est là quelque chose qui vous empêche de rendre les images à la taille vous voulez leur en premier lieu ?