communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer： 2024-11-19 04:58:02
original
354 Les gens l'ont consulté

How Can I Effectively Scale CSS Sprites Using `background-size`?

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!

source：php.cn
Article précédent：Veuillez fournir le contenu de l'article afin qu'un titre puisse être généré qui corresponde au contenu de l'article. Article suivant：Comment récupérer les propriétés CSS des feuilles de style externes sans éléments rendus ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1992
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2156
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1820
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1713
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1734
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal