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.
Nom : 1f6a6petit.png Affichages : 180 Taille : 4,6 Ko
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%; }