.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...
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); }Les dimensions de votre image sprite sont de 500x400, donc si vous souhaitez modifier
background-size减小 2，请定义该尺寸的一半，然后调整background-positionpour 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; }