Maison >interface Web >tutoriel CSS >Comment puis-je mettre à l'échelle efficacement les sprites CSS à l'aide de « background-size » ?
Comment puis-je mettre à l'échelle efficacement les sprites CSS à l'aide de « background-size » ?
- DDDoriginal
- 2024-11-19 04:58:02395parcourir
Mise à l'échelle des sprites CSS avec la taille de l'arrière-plan
Lors de l'utilisation de sprites CSS comme images d'arrière-plan, leur mise à l'échelle à des dimensions plus petites peut être un résultat souhaité. Cet article explique comment redimensionner efficacement les sprites à l'aide de la propriété background-size.
Problème : impossibilité de mettre à l'échelle les sprites
Un problème courant survient lorsque l'on tente de redimensionner les sprites à une taille plus petite, ce qui entraîne l'image complète étant affichée au lieu de la version à l'échelle souhaitée.
Solution utilisant background-size
Pour mettre à l'échelle sprites, il est crucial de prêter attention aux dimensions de l’image du sprite. Dans votre exemple :
Avec l'image d'arrière-plan définie sur "https://i.sstatic.net/lJpW8.png", la taille de l'image est de 500 x 400.
Pour le mettre à l'échelle de moitié, définissez les nouvelles dimensions dans la propriété background-size :
`
background-size: 250px 200px;
...
Cela réduit la largeur et la hauteur du sprite à 250px et 200px, respectivement.
Ajustement de la position de l'arrière-plan
De plus, pour cibler et afficher un élément spécifique icône dans le sprite, ajustez la propriété background-position. Par exemple, pour afficher l'icône située à -200px 0px dans l'image originale en taille réelle, ce qui suit suffirait :
`
background-position: 150px 0px;
...
N'oubliez pas que la distance de déplacement pour la position d'arrière-plan est réduite de moitié comme le sprite est réduit à la moitié de sa taille d'origine. Cela garantit que l'icône souhaitée est affichée.
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!