CSS - en utilisant une image de fond avec plusieurs images dessus

J'ai observé que, souvent, les sites web utilisent une seule image d'arrière-plan qui contient plusieurs images. Par exemple, au lieu d'utiliser séparément les icônes, toutes les icônes sont placées sur une image puis les différentes parties de l'image sont utilisés dans les différentes section.

  • Est-il un avantage à cela?
  • Comment cela peut-il être utilisé?

Par exemple, pour la suite d'un Débordement de Pile sprite, comment pourrais-je afficher une image?

CSS - en utilisant une image de fond avec plusieurs images dessus

source d'informationauteur Roman

  1. 19

    La technique est appelée Les Sprites CSS. Fondamentalement, vous utilisez CSS, background-position de propriété et fixe height ou width pour votre élément.

    Si votre elemnts sont de largeur fixe et hauteur fixe dans le même temps, vous pouvez librement créer une image compacte. Voir ce site pour des exemples plus complexes.

  2. 4

    Vous parlez des sprites CSS, dans l'arrière-plan des changements de position sur le vol stationnaire. En savoir plus ici:

    http://css-tricks.com/css-sprites/

  3. 1

    Changement de la propriété css background-position.

  4. 1

    oui , à l'aide de sprites est bon pour le site remplit parce que de tous les composants sur le site web envoyer différents de la requête http .Donc, lorsque nous avons utiliser des sprites d'images de la requête http deviennent de moins en moins & site web de l'augmentation de la performance.Cette règle est également applicable sur css aussi moins fichiers css, moins de la requête http. vous pouvez vous-même avec l'aide de l'inspecteur web de safari.

    pour plus de meilleures performances télécharger "yslow"

  5. 1

    Et avec des sprites CSS est également possible de faire par exemple le bouton de menu hover effet, sans attendre jusqu'à la deuxième image se charge. voir

  6. 0

    Il a l'avantage d'une seule image doit être chargé de façon à ce que les choses comme les passez la souris (roll-over), les effets sont plus rapides. La technique est généralement appelé "sprites CSS". Google pour elle.

  7. 0

    Il a été commun pour un temps à mettre deux images sur une feuille sprite, mais la tendance s'oriente vers la combinaison de TOUTES vos images de fond sur la même feuille sprite pour charger un seul fichier pour tous. Il y a plutôt bon tutoriel ici.