Comment CSS utilise-t-il la technologie d'aplatissement d'image ?

Ce chapitre vous présentera comment utiliser la technologie d'assemblage d'images en CSS ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Assemblage d'images

L'assemblage d'images est une collection d'images uniques.

Les pages Web contenant de nombreuses images peuvent prendre beaucoup de temps à charger et générer des requêtes vers plusieurs serveurs.

L'utilisation de l'assemblage d'images réduira le nombre de requêtes du serveur et économisera de la bande passante.

2. Assemblage d'images - exemple simple

Au lieu d'utiliser trois images indépendantes, nous utilisons cette seule image ("img_navsprites. gif") :

Avec CSS, nous pouvons afficher uniquement la partie de l'image dont nous avons besoin.

Dans l'exemple suivant, CSS spécifie une partie de l'image à afficher "img_navsprites.gif" :

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Exemple d'analyse :

• < img class="home" src="img_trans.gif" /> -Comme il ne peut pas être vide, l'attribut src définit uniquement une petite image transparente. L'image affichée sera l'image d'arrière-plan que nous avons spécifiée en CSS

• Largeur : 46px ; Hauteur : 44px - Définissez la partie de l'image que nous utilisons

• background:url(img_navsprites.gif) 0 0; - Définir l'image d'arrière-plan et sa position (gauche 0px, haut 0px)

C'est la façon la plus simple d'utiliser l'assemblage d'images , nous utilisons maintenant des liens et des effets de survol.

3. Assemblage d'images - Créer une liste de navigation

Nous souhaitons utiliser des images assemblées ("img_navsprites.gif") pour créer une navigation liste.

Nous utiliserons une liste HTML car elle peut être liée et prend également en charge les images d'arrière-plan :

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Exemple de résolution :

• #navlist { position:relative;} - Position définit le positionnement relatif, créant le positionnement absolu à l'intérieur de

• #navlist li{margin:0;padding:0;list-style:none;position:absolute ; top:0;} - la marge et le remplissage sont définis sur 0, les styles de liste sont supprimés et tous les éléments de la liste sont positionnés de manière absolue

• #navlist li, #navlist a{height:44px; display :block;} - La hauteur de toutes les images est de 44px

Maintenant, parlons du positionnement et du style de chaque section spécifique :

• #home {left :0px;width:46px;} - Positionné à l'extrême gauche et la largeur de l'image est de 46px

• #home{background:url(img_navsprites.gif) 0 0 ;} - Définir l'image de fond et sa position (0px à gauche, 0px en haut)

• #prev{left:63px;width:43px;} - positionnement 63px à droite (#home largeur 46px + projeter un espace supplémentaire entre), avec une largeur de 43px.

• #prev{background:url('img_navsprites.gif') -47px 0;} - Définir l'image d'arrière-plan 47px à droite (#home largeur 46px + 1px de séparateur)

• #next{left:129px;width:43px;}- La position de droite est de 129px (#prev 63px + #prev la largeur est de 43px + espace restant), la largeur est de 43px.

• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Définissez 91px sur le côté droit de l'image d'arrière-plan (#home 46px+1px ligne de séparation + #prev largeur 43px + 1px ligne de séparation)

IV Assemblage d'image - effet de survol

Maintenant, nous voulez notre navigation Ajoutez un effet de survol à la liste.

:hover selector est utilisé pour afficher l'effet lorsque la souris survole l'élément

Astuce : Le sélecteur :hover peut être appliqué à tous les éléments.

Notre nouvelle image ("img_navsprites_hover.gif") contient trois images de navigation et trois images :

Parce qu'il s'agit d'une seule image, au lieu de 6 images distinctes fichiers image, il n’y aura pas de chargement paresseux lorsque l’utilisateur survolera l’image.

Nous ajoutons seulement trois lignes de code pour ajouter l'effet de survol :

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

Exemple d'analyse :

• Puisque l'élément de liste contient un lien , nous Vous pouvez utiliser : pseudo-classe de survol

• #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - pour les trois images de survol que nous spécifions la même chose Les positions d'arrière-plan ne sont que de 45 pixels chacune plus bas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!