Comment puis-je réduire la taille des sprites CSS à la moitié de leur taille à l'aide de « background-size » ?

Mise à l'échelle des sprites CSS à l'aide de background-size

Les sprites sont une technique utilisée pour combiner plusieurs images en une seule, améliorant ainsi les performances du site Web. Cependant, lorsque vous utilisez des sprites comme images d'arrière-plan, vous pouvez rencontrer des difficultés pour les mettre à l'échelle aux dimensions souhaitées.

Défi :

Dans ce scénario spécifique, l'objectif est de mettre à l'échelle un sprite de 100 px sur 100 px à la moitié de sa taille en utilisant la propriété background-size. Le code actuel entraîne l'affichage de l'image en taille réelle.

Solution :

Pour surmonter ce problème, vous devez définir la dimension de l'image du sprite. Dans ce cas, puisque le sprite mesure 500 px sur 400 px, vous pouvez le réduire de moitié en définissant la taille de l'arrière-plan sur 250 px sur 200 px. De plus, ajustez la position de l'arrière-plan pour obtenir l'icône souhaitée.

Exemple :

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

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

Avec ces ajustements, le sprite sera réduit à la moitié de sa taille d'origine, ce qui donne une image de 50 px sur 50 px. La valeur de position d'arrière-plan de 150px 0px garantit que l'icône souhaitée est visible dans le sprite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!