CSS: affichage d'une icône particulière à partir d'un fichier image

Comment peut-on définir la propriété CSS background-image pour charger simplement une icône particulière à partir d'une image plus grande? Par exemple, jQuery UI met en forme son widget Dialog en utilisant le fichier d'image PNG suivant: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, qui code un tas d'icônes dans celui-ci. Ensuite, comme démoed dans http://docs.jquery.com/UI/Dialog la poignée de redimensionnement en bas à droite charge la toute dernière icône du PNG.CSS: affichage d'une icône particulière à partir d'un fichier image

En utilisant Firebug je peux voir un tas de propriétés CSS comme ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se appliqué qui fait référence à url(ui-icons.xx.png), mais rien sur la sélection d'une icône particulière.

Source

2009-09-30 Jerry Chong

Il s'agit en fait d'une technique de sprite CSS.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

utilisation

background-position

propriété

Si une image d'arrière-plan a été spécifié, cette propriété spécifie sa position initiale . Si une seule valeur est spécifiée, la seconde valeur est supposée pour être 'centre'. Si au moins une valeur n'est pas un mot-clé, alors la première valeur représente la position horizontale et la seconde représente la position verticale . Les valeurs négatives et sont autorisées.

Par exemple:

body { background: url("banner.jpeg") right top } /* 100% 0% */ 
body { background: url("banner.jpeg") top center } /* 50% 0% */ 
body { background: url("banner.jpeg") center }  /* 50% 50% */ 
body { background: url("banner.jpeg") bottom }  /* 50% 100% */

La propriété CSS background est un raccourci pour définir la propriété d'arrière-plan individuel valeurs en un seul endroit dans la feuille de style. L'arrière-plan peut être utilisé pour définir les valeurs pour l'un ou plusieurs des éléments suivants: background-color, background-image, background-position, background-repeat, background-attachment.

.PosBG { 
    background-image: url("logo.png"); 
    background-attachment: fixed; 
    background-position: 100% 100%; 
    background-repeat: no-repeat; 
}

Source

2009-09-30 05:09:45 rahul

Quelque chose comme ce qui suit:

background-image: url('yourimage.png'); 
background-repeat: no-repeat; 
background-position: 25px 0px;

voir http://www.w3schools.com/css/pr_background-position.asp pour plus sur fond positions

Source

2009-09-30 05:10:05

Merci pour le partage –

Le lien ci-dessus est maintenant cassé. Utilisez ceci à la place: http://www.w3schools.com/css/css_image_sprites.asp – Javide

@javid Je viens de lire votre lien utile de travail, mais en ce qu'ils disent la technologie sprite est utile et expliquent aussi que je suis d'accord avec w3school. mais qu'en est-il de cette déclaration "Une page Web avec de nombreuses images peut prendre beaucoup de temps à charger et génère plusieurs demandes de serveur." pour séparer les images de toute façon Vous devez appeler l'image plusieurs fois en utilisant la propriété url. – user2826111

Under the covers...

Les éléments d'ancrage sont de taille fixe et l'arrière-plan est réglé sur l'image contenant toutes les icônes mais la propriété background-position est spécifiée ed pour décaler l'image de fond afin que seule l'icône désirée de l'image soit affichée.

Jetez un coup d'œil à A List Apart's explaination of the technique.

Source

2009-09-30 05:16:03 MyItchyChin

Merci cela m'a vraiment aidé ...... – User

CSS: affichage d'une icône particulière à partir d'un fichier image

Répondre

Questions connexes