CSS technologie image mosaïque

l'image de Split

Aplatir l'image est une collection d'images individuelles.

Il y a beaucoup d'images sur la page peut prendre beaucoup de temps pour charger et génère des demandes de plusieurs serveurs.

Utilisez une scission du serveur d'image permettra de réduire le nombre de demandes et économiser la bande passante.

l'image Split - exemple simple

Au lieu d'utiliser trois images distinctes, comme nous utilisons cette image unique ( "de img_navsprites.gif"):

Avec CSS, nous pouvons montrer qu'une partie de l'image que nous devons.

Dans l'exemple ci-dessous montre une partie de la CSS spécifiée "img_navsprites.gif" image:

Desexemples d'analyse:

• <Class Img = "home" src = "img_trans.gif" /> - parce qu'ils ne peuvent pas être vide, l'attribut src définit seulement une petite image transparente. L'image affichée sera nous spécifions en CSS images de fond
• Largeur: 46px; hauteur: 44px; - défini une partie de l'image que nous utilisons
• background: url (img_navsprites.gif) 0 0; - image d'arrière-plan et sa position (0px gauche, en haut 0px)

Cela se fait à l'aide d'une image divisée la meilleure façon, et maintenant, nous utilisons des liens et des effets hover.

Aplatir l'image - pour créer une liste de navigation

Nous voulons utiliser l'image split ( "de img_navsprites.gif"), pour créer une liste de navigation.

Nous allons utiliser une liste de HTML, car il peut être lié, et soutient également une image de fond:

Desexemples d'analyse:

• #navlist {position: relative;} - position est réglée positionnement relatif, permet le positionnement absolu intérieur
• #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - marge et le remplissage est réglé sur 0, le style de liste est supprimé, tous les éléments de la liste sont le positionnement absolu
• #navlist li, #navlist un {height: 44px; display: block;} - la hauteur de toutes les images est 44px

Maintenant, chaque positionnement de pièce spécifique et le style:

• #Page {left: 0px; largeur: 46px;} - positionné à gauche, et la façon dont la largeur d'image est 46px
• #Page {background: url (img_navsprites.gif) 0 0;} - image d'arrière-plan et sa position (0px gauche, en haut 0px)
• #prev {left: 63px; largeur: 43px;} - sur le 63px droit de positionnement (#Page largeur 46px + un espace supplémentaire entre les éléments), une largeur de 43px.
• #prev {background: url ( 'img_navsprites.gif') -47px 0;} - l'image d'arrière-plan personnalisé sur la droite 47px (#Page diviseurs de 46px largeur + 1px)
• #next {left: 129px; width: 43px;} - à la 129px de positionnement à droite (#prev de 63px + largeur de #prev est 43px + espace restant), la largeur est 43px.
• #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - l'image d'arrière-plan personnalisé sur la droite 91px (#Page 46px + 1px division ligne + # largeur prev 43px + 1px diviseurs)

Aplatir l'image s - hover effet

Maintenant, nous voulons que notre liste de navigation pour ajouter un effet de survol.

	: Le sélecteur effet de survol pour planer sur l'affichage de l' élément sélecteur Astuce :: hover peut être appliqué à tous les éléments.

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

Comme ceci est une image unique, au lieu de six fichier image distincte lorsqu'un utilisateur reste sur l'image ne sera pas retarder le chargement.

Nous ajoutons des effets de survol ajouter seulement trois lignes de code:

Desexemples d'analyse:

• Depuis l'élément de liste contient un lien, nous pouvons utiliser le: hover pseudo-classe
• #Page a: hover {background: url transparent (img_navsprites_hover.gif) 0 -45px;} - Pour les trois images hover nous spécifions la même position d'arrière-plan, mais puis vers le bas 45px chaque