Sprites CSS (Sprites)

CSS Sprites technology is a method to reduce the number of HTTP requests sent to image resources by merging images into a single file.

What is a sprite image

Sub-images are two-dimensional images, consisting of small images combined into a large image at defined X and Y coordinates.

To display a single image from a composite image, you can use CSS background-positionProperties, defining the exact position of the image to be displayed.

Advantages of using CSS Image Sprite

Web pages with many images, especially many small images (such as icons, buttons, etc.), may take a long time to load and generate multiple server requests.

Using image sprites instead of individual images will greatly reduce the number of HTTP requests sent by the browser to the server, which is very effective in shortening the loading time of web pages and the overall performance of the website.

Examine the following examples, and you will notice a distinct difference. When you first place the mouse pointer over a browser icon in a non-Sprite version, a hover image will appear after a period of time, because the hover image is loaded from the server when the mouse hovers over it, as both the normal image and the hover image are two different images.

tandis que dans la version Sprite, en raison de la combinaison de toutes les images dans une seule image, l'image de survol s'affiche immédiatement au survol de la souris, produisant ainsi un effet de survol fluide. En utilisant CSS Sprite, l'utilisateur peut réduire le nombre de requêtes HTTP, la taille totale des fichiers également diminue, ce qui peut améliorer l'efficacité de l'accès.

rendant l'image sprite

en passant10d'images individuelles pour les combiner en une seule image (mySprite.png）pour créer cet image sprite. Vous pouvez utiliser n'importe quel outil d'édition d'image préféré pour créer votre propre sprite.

Afficher l'icône à partir de l'image sprite

Enfin, avec CSS, nous pouvons afficher une partie de l'image sprite souhaitée.

Tout d'abord, nous allons créer une classe .sprite qui chargera l'image sprite. Cela évite la répétition, car tous les éléments partagent la même image de fond.

.sprite {
　　　　background:　url("images/mySprite.png")　no-repeat;
}

Maintenant, nous devons définir une classe pour chaque élément à afficher. Par exemple, pour afficher l'icône Internet Explorer, le sprite d'image sera le code CSS.

.ie {
　　　　largeur:　50px;　/*　Largeur de l'icône　*/
　　　　height:　50px;　/*　Hauteur de l'icône　*/
　　　　display:　inline-block;　/*　Afficher l'icône comme inline block　*/
　　　　background-position: 0　-200px;　/*　Icone arrière-plan position dans sprite　*/
}

Maintenant, le problème se pose, comment obtenons-nous ces valeurs de pixelsbackground-position？Laissons-nous trouver la réponse. La première valeur est la position horizontale de laposition horizontale，le deuxième est la position horizontale de laposition verticale。En raison du contact de l'angle supérieur gauche de l'icône Internet Explorer avec le bord gauche, la distance horizontale entre elle et le point de départ (c'est-à-dire l'angle supérieur gauche de l'image sprite) est0，et en raison de sa position à la5emplacement,Par conséquent, la distance verticale entre l'image sprite et le point de départ est4 X 50px = 200px, car la hauteur de chaque icône est50px。

Pour afficher l'icône Internet Explorer, nous devons déplacer son angle supérieur gauche à l'origine, c'est-à-dire à l'angle supérieur gauche de l'image sprite (mySprite.png). De plus, en raison de la distance verticale de cet icône200px，par conséquent, nous devons déplacer toute l'image de fond (mySprite.png) vers le haut200px，ce qui nécessite que nous appliquions la valeur comme nombre négatif-200px，caractère négatif le fait monter verticalement, tandis que le caractère positif le fait descendre. Cependant, il n'a pas besoin de décalage horizontal, car l'angle supérieur gauche de l'icône Internet Explorer n'a pas de pixels avant lui.

使用CSS Image Sprite创建导航菜单

在上一节中，我们学习了如何显示图像精灵中的单个图标。这是使用图像精灵的最简单方法，现在我们将通过构建一个具有翻转效果的导航菜单向前迈出一步。

在这里，我们将使用相同的精灵图像（mySprite.png）创建导航菜单。

导航基础HTML

我们将从创建带有HTML 无序列表的导航菜单开始。

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li　class="ie"><a　href="#">Explorer</a></li>
　　　　<li　class="opera"><a　href="#">Opera</a></li>
　　　　<li　class="safari"><a　href="#">Safari</a></li>
</ul>

在导航上应用CSS

以下各节将介绍如何使用CSS将上面示例中给出的简单无序列表转换为基于恶意图像的导航。

Étapes1：重置列表结构

默认情况下，HTML 无序列表显示为项目符号。我们需要通过将list-style-type属性设置为来删除默认的项目符号none。

ul.menu　{
　　　　list-style-type:　none;
}
ul.menu　li　{
　　　　padding:　5px;
　　　　font-size:　16px;
　　　　font-family:　"Trebuchet　MS",　Arial,　sans-serif;
}

Étapes2：为每个链接设置通用属性

在这一步中，我们将设置所有链接都将共享的所有公共CSS属性。如：color，background-image，display，padding等。

ul.menu　li　a　{
　　　　height:　50px;
　　　　line-height:　50px;
　　　　display:　inline-block;
　　　　padding-left:　60px;　/*　To　sift　text　off　the　background-image　*/
　　　　color:　#3E789F;
　　　　background:　url("images/mySprite.png")　no-repeat;　/*　Comme tous les liens partagent le même arrière-plan-image　*/
}

Étapes3: définir l'état par défaut de chaque lien

Maintenant, nous devons définir une classe pour chaque élément de menu, car chaque élément dans l'image sprite abackground-position. Par exemple, l'icône Firefox est située à l'origine de l'image sprite, c'est-à-dire, en haut à gauche, donc elle n'a pas besoin de déplacer l'image de fond. Par conséquent, dans ce cas, la position verticale et horizontale du fond sera 0. De même, vous pouvez définir la position de fond pour d'autres icônes à l'intérieur de l'image sprite.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0　-100px;
}
ul.menu li.ie a {
　　　　background-position: 0　-200px;
}
ul.menu li.safari a {
　　　　background-position: 0　-300px;
}
ul.menu li.opera a {
　　　　background-position: 0　-400px;
}

Étapes4: ajouter l'état d'hover du lien

Ajouter un état d'hover est le même principe que d'ajouter un lien. Il suffit de déplacer leur coin supérieur gauche à l'origine de l'image sprite (c'est-à-dire, le coin supérieur gauche), comme nous l'avons fait ci-dessus. Vous pouvezbackground-positionOn peut calculer simplement en utilisant la formule suivante :

La position verticale de l'état d'hover = position verticale de l'état normal - 50px

Comme l'image de souris flottante est juste sous l'état par défaut, la hauteur de chaque icône est donc égale à50px. L'état d'hover de l'icône n'a pas besoin de décalage horizontal, car il n'y a pas de pixels avant le coin supérieur gauche de l'icône.

ul.menu li.firefox a:hover {
　　　　background-position: 0　-50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0　-150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0　-250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0　-350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0　-450px;
}

C'est fait ! Après avoir combiné tout le processus, voici notre code HTML et CSS final :