Mettre à l'échelle les sprites CSS en images d'arrière-plan : un guide

Question

.my-sprite {
  background-image: url("https://i.stack.imgur.com/lJpW8.png");
  height: 100px;
  width: 100px;
  background-position: 0 0;
  background-position: -200px 0px;
}

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

Je n'arrive pas à réduire la taille de mon sprite. Je veux qu'il soit comme la moitié de la taille réelle, c'est-à-dire 100x100px. Comment puis-je le mettre à l'échelle en utilisant l'attribut background-size ? Désormais, il n'affiche que la taille complète de l'image de 100x100px...

Answer 1

Vous pouvez utiliser transform:scale().

.my-sprite {
  background-image: url("https://picsum.photos/id/217/200/300");
  height: 100px;
  width: 100px;
  background-position: -200px 0px;
  transform: scale(.3);
}

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

Answer 2

Les dimensions de votre image sprite sont de 500x400, donc si vous souhaitez modifier background-size 减小 2，请定义该尺寸的一半，然后调整 background-position pour obtenir l'icône de votre choix :

.my-sprite {
    background-image: url("https://i.stack.imgur.com/lJpW8.png");
    height:50px;
    width:50px;
    background-position:150px 0px;
    background-size:250px 200px;
    
    border:1px solid;
}

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