Bonjour,
je souhaite réaliser un sprite à partir de l'image jointe (l'original fait 512px x 512px).
La petite difficulté, c'est que je souhaite "isoler" chaque feu, donc faire 3 images disposées verticalement mais les afficher horizontalement.
Voici mon code.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="icone"> <li class="icone-1"></li> <li class="icone-2"></li> <li class="icone-3"></li> </ul> </body> </html>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 /* Cibler les éléments <li> appartenant à un élément de classe "icone" */ .icone li { width: 512px; height: 200px; display: inline;/* pour afficher chaque image sur une ligne horizontale */ background: url("mon_image.png") no-repeat; } .icone-1 { background-position: left top; } .icone-2 { background-position: left -20%; }/*les décalages sont mis au pif */ .icone-3 { background-position: left -40%; }
Partager