Comment mettre à l'échelle correctement les sprites CSS en tant qu'images d'arrière-plan ?

Mise à l'échelle des sprites CSS comme images d'arrière-plan

Lors de l'utilisation de sprites CSS comme images d'arrière-plan, il est parfois nécessaire de les réduire à une taille plus petite. Cependant, le simple fait de spécifier une hauteur et une largeur plus petites dans le CSS peut ne pas toujours fonctionner.

Pour redimensionner correctement les sprites CSS avec la propriété background-size, considérez ce qui suit :

1. Déterminez les dimensions de l'image du sprite :

Vérifiez les dimensions de l'image du sprite pour la mettre à l'échelle avec précision. Par exemple, si le sprite fait 500x400 pixels et que vous souhaitez le réduire de moitié, les nouvelles dimensions doivent être de 250x200 pixels.

2. Spécifiez à la fois la hauteur et la largeur dans background-size :

Lors de la définition de la propriété background-size, spécifiez les valeurs de hauteur et de largeur. L'utilisation d'une seule valeur entraînera une distorsion.

3. Ajustez background-position sur Offset :

Pour décaler l'arrière-plan du sprite, utilisez des valeurs négatives dans la propriété background-position. Cela vous permet d'afficher uniquement une partie spécifique du sprite.

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;
}

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!