Comment mettre à l'échelle efficacement les sprites CSS à l'aide de « background-size » ?

Mise à l'échelle des sprites CSS avec la taille d'arrière-plan

Les sprites CSS, des images composées de plusieurs images plus petites, sont une technique précieuse pour réduire les requêtes HTTP. Cependant, des problèmes peuvent survenir lorsque vous devez redimensionner ces sprites à des dimensions plus petites.

Par exemple, disons que vous avez un sprite d'une taille de 100x100px et que vous souhaitez le réduire de moitié. L'utilisation de la propriété background-size ne semble pas faire l'affaire.

Solution :

La clé réside dans la compréhension de la taille d'origine du sprite. Supposons que votre image de sprite ait des dimensions de 500 x 400. Pour le redimensionner de moitié, vous devez définir la taille de l'arrière-plan à la moitié de ces dimensions :

background-size: 250px 200px;

De plus, vous devrez peut-être ajuster la position de l'arrière-plan pour vous assurer que vous accédez à la partie souhaitée de le lutin. Par exemple, pour afficher la partie supérieure gauche du sprite, vous pouvez utiliser :

background-position: 150px 0px;

Avec ces ajustements, vous pouvez efficacement redimensionner vos sprites CSS à des dimensions plus petites tout en conservant la partie souhaitée de l'image.

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!