Taille d'arrière-plan des sprites CSS

Question

J'ai une page où j'utilise actuellement des sprites d'image CSS pour les icônes en arrière-plan.

Le problème que j'ai avec l'utilisation des sprites CSS est la taille de l'arrière-plan. Je ne suis pas sûr de savoir quelle est la meilleure façon d'augmenter ou de réduire les images afin que mes images ne soient pas floues.

Voici ma CSS actuellement;

background-image: url(../../img/registration_icons_720.png); 
background-size: 273px 342px; 
background-repeat: no-repeat; 
display: block; 
font-size: 25px; 
height: 60px; 
margin-top: 40px; 

Et voici à quoi ressemblent les icônes. blurry icons CSS sprites

Ma question est, quelqu'un peut-il me dire ce que je fais mal et quelle est la meilleure façon de trouver la taille d'arrière-plan pour l'utilisation des sprites CSS?

Un grand merci

Answer 1

j'avais eu ce problème ces derniers temps tout en utilisant des feuilles de sprite SVG comme des images de fond pour mes icônes/boutons. En fait, ce que j'ai réalisé est que l'utilisation de 'background-size: contain' pour les fichiers SVG individuels pour mes icônes lors de la configuration. la 'hauteur' de leur élément comme la taille que je voulais pour les icônes, mes icônes étaient parfaitement nettes à la fois dans Chrome/Firefox. Mais quand je suis allé utiliser des sprites, je ne pouvais plus utiliser 'background-size: contain' car les icônes étaient de tailles différentes dans ma feuille de sprite. En les dimensionnant en utilisant des pixels avec une taille d'arrière-plan, ils sont devenus légèrement moins nets dans Chrome, et trop flous pour passer dans Firefox. J'étais prêt à accepter qu'ils soient légèrement moins nets dans Chrome (ils avaient l'air bien, et j'ai remarqué que les icônes de la plupart des sites sont à peu près au même niveau que "imparfait"), mais pas dans Firefox.

Ma solution consistait à faire en sorte que toutes mes icônes aient la même hauteur dans Illustrator/mon fichier SVG et à les afficher dans une rangée horizontale. De cette façon, je pourrais toujours utiliser 'contain' pour 'background-size' tout en définissant la 'hauteur' de l'élément parent, et utiliser simplement 'background-position' pour définir la position de l'icône horizontalement dans ma 'largeur' désirée. Ensuite, je voudrais simplement utiliser un remplissage sur leur élément pour faire la région cliquable de l'icône quelle que soit la taille que je voulais. Je ne suis pas tout à fait sûr combien cela aiderait lors de l'utilisation de fichiers PNG, mais en supposant que vous n'avez pas d'icônes qui sont considérablement plus grandes que les autres, et que vous êtes en mesure de redimensionner vos fichiers PNG dans Photoshop afin qu'ils sommes tous de la même taille, cela pourrait marcher en votre faveur.

Espérons que cela aide.