CSS Sprites (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 composed of small images combined into a large image under the defined X and Y coordinates.

To display a single image from a composite image, you can use CSS background-positionProperty, 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.

Check the following examples, and you will notice a significant difference. When you first place the mouse pointer over a non-Sprite version of the browser icon, 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.

And in the Sprite version, since all images are combined into one image, the hover image is displayed immediately when the mouse hovers over it, thus producing a smooth hover effect. After using CSS Sprite, users can reduce the number of HTTP requests and the total file size by accessing the composite image, which can improve the efficiency of access.

making the image sprite

We do this by10Combining a single image into one image (mySprite.png）to create this sprite image. You can use any image editing tool to create your own sprite.

Display icon from image sprite

Finally, with CSS, we can display only a part of the required image sprite.

Firstly, we will create the .sprite class that will load the sprite image. This is to avoid repetition, as all items share the same background image.

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

Now, we must define a class for each item to be displayed. For example, to display the Internet Explorer icon, the image sprite will be the CSS code.

.ie {
　　　　width:　50px;　/*　Icon width　*/
　　　　height:　50px;　/*　Icon height　*/
　　　　display: inline-block;　/*　Display icon as inline block　*/
　　　　background-position: 0　-200px;　/*　Icon background position in sprite　*/
}

Now the problem arises, how do we get these pixel valuesbackground-positionLet's find out the answer. The first value is the background'shorizontal positionThe second one is the background'svertical position. Because the top-left corner of the Internet Explorer icon touches the left edge, its horizontal distance from the origin (that is, the top-left corner of the image sprite) is0And since it is located at the5positions,Therefore, the vertical distance from the origin to the image sprite's position is4 X 50px = 200px, because the height of each icon is50px

To display the Internet Explorer icon, we must move its top-left corner to the origin, that is, the top-left corner of the image sprite (mySprite.png). Additionally, since the vertical distance of this icon is200pxTherefore, we need to move the entire background image (mySprite.png) vertically upwards200pxThis requires us to apply the value as a negative number-200pxBecause a negative value will make it move vertically upwards, while a positive value will make it move downwards. However, it does not need horizontal offset, as there are no pixels at the top-left corner of the Internet Explorer icon.

Using CSS Image Sprite to Create Navigation Menu

In the previous section, we learned how to display a single icon from the image sprite. This is the simplest way to use an image sprite, and now we will build aFlip effectto take a step forward in creating the navigation menu.

Here, we will use the same sprite image (mySprite.png）to create the navigation menu.

Navigation basic HTML

We will start by creating a navigation menu with HTML unordered listNavigation menu starts.

<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>

Apply CSS to navigation

The following sections will introduce how to use CSS to convert the simple unordered list given in the example into a navigation based on malicious images.

Steps1: Reset list structure

By default, HTML unordered listDisplay as list item. We need to uselist-style-typeProperties are set to remove the default list item symbol none.

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

Steps2: Set common properties for each link

In this step, we will set all the common CSS properties that all links will share. For example:color,background-image,display,paddingetc.

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;　/*　As all links share the same background-image　*/
}

Steps3: Set the default state of each link

Now, we must define a class for each menu item because each item in the image sprite has a differentbackground-position. For example, the Firefox icon is at the starting point of the image sprite, i.e., the top-left corner, so there is no need to move the background image. Therefore, in this case, the vertical and horizontal position of the background will be 0. Similarly, you can define the background position for other icons within the 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;
}

Steps4: Add the hover state of the link

Adding the hover state is the same principle as adding the above link. Just move their top-left corner to the starting point of the image sprite (i.e., the top-left corner), just like we did above. You canbackground-positionIt can be simply calculated using the following formula:

The vertical position of the hover state = the vertical position of the normal state - 50px

Since the mouse hover image is just below the default state, the height of each icon is equal to50px. The hover state of the icon does not need horizontal offset because there are no pixels before the top-left corner of the icon.

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;
}

Done! After combining the entire process, this is our final HTML and CSS code: