I used to see many large websites. The background images of the entire website are the same image. I downloaded the background images and saw many small icons on the images.
CSS Sprites, which is very popular in foreign countries, is also used by many websites in China.
This time, when I wrote CSS + Div, I also wrote the whole site. Although the whole site is slow, it really saves a lot of resources for the website.
Generally, website images are separated, and each image call occupies an IIS link. However, when all images are placed on one graph, all images are one image, you only need to call an image once to provide images for the entire web page. This occupies only one IIS link.
During the production process, all the images are implemented using the background. For example, if a small icon is used, the <B class = "exp"> </B> is used to display the image, set the exp style to a background, and the background is an image.
For example:
. Exp
{
Background-image: url(bg.gif);/* background image */
Background-repeat: No-Repeat;/* Not tiled */
Background-position:-300px-50px;/* sets the position of the background image in the entire graph, and adds a negative number to the front */
Width = 25px;/* width */
Height = 25px;/* height */
}
When setting the background, you can specify the position of the background on the image, and then control the width and height. In this way, an icon is displayed, display All the interface images of the website in this way. Each graph is a small part of the big picture.
The position of each small icon in the big image can be viewed by line in PS.