CSS Sprites

CSS Sprites is an image processing technique. In fact, it should be written as CSS Image Sprites and translated into CSS image sprites. CSS Sprites techniques are commonly used in the graphic management of web components on large websites, such as Google, Amazon.com, Yahoo, YouTube, Groupon.. . And so on, all use the CSS Sprites technique. The advantage of this technique is that it can greatly reduce the number of server accesses. Assuming that there are 100 different graphic elements in a web page, the traditional way must send 100 requests to the server. To obtain a complete component set, through CSS Sprites, it can be reduced to 1 request to complete the acquisition of all graphics components, which is equivalent to greatly reducing the workload of the server.

The operation concept

designer of CSS Sprites directly combines the pictures that will be used in the entire webpage into a large picture. When a netizen opens the webpage, the entire large picture is transmitted to the netizen’s computer, and then through the CSS graphic size setting and background In such a way, each small picture in the big picture is separated and filled in the position to be presented in the web page. The website server only needs to send 1 big picture to the netizen, and other picture processing tasks are completed by the netizen’s computer. The advantage is that the workload of the server is saved and the cost is relatively reduced. The disadvantage is that the designer needs to spend more time designing.

The CSS Sprites example

assumes that there is a complete picture as follows, and the picture name is called BigImg.gif.



Next, use the technology of CSS Sprites to change the positions of the three blue squares containing English letters, from the original ABC to CBA. The following sample code is divided into CSS image processing and HTML img presentation location planning.

<style>
#Img1{
　width:51px;
　height:50px;
　background:url(BigImg.gif) -102px 0px;
}
#Img2{
　width:51px;
　height:50px;
　background:url(BigImg.gif) -51px 0px;
}
#Img3{
　width:51px;
　height:50px;
　background:url(BigImg.gif) 0px 0px;
}
</style>
<img id="Img1" src="Alternative picture.png">
<img id="Img2 "src="Alternate
Picture.png" > <img id="Img3" src="Alternate Picture.png">

As shown in the



example, there are three img tags. Since the src cannot be blank, we used a transparent image with a width and height of 1px "alternative image.png" and put it in the src. This alternate image is only used to place space Because it will be replaced by the part split by BigImg, the focus of CSS Sprites is on the syntax of the background. The url imports the big picture, followed by the distance to the left and the distance to the top. For example, Img1 is written as "background:url( BigImg.gif) -102px 0px;" means to start calculation from the position of -102px to the left and 0px to the top of the big picture. As for the width and height of the rectangle with 51px and 50px, this will obtain the rectangle marked with the English letter C Blue square, and then put this blue square on the webpage where id=img1 is in the picture position. Use the same method to get the other two small pictures and place them at id=Img2 and id=Img3. The positions of the three English letters are The replacement is complete.

Remarks, BigImg.gif and substitute picture.png in the above example are all illustrations. The purpose of the example is to show how to use CSS Sprites to obtain the required part from a big picture and place it in the place where the picture is presented. Actually used in a web design plan, it is necessary to combine art design and programming to complete such a presentation method. Although the design process takes more time, the relative website traffic is larger. Using CSS Sprites saves more server workload.