Using DIV+CSS to cut multi-backgrounds combined picture CSS Sprites Technology

A long time ago in the Internet site and some JS plug-ins have seen the application of this technology, then feel very troublesome, there is no use, nor to delve into.

In the near period of time has been doing some things at the front desk, involving a lot of div+css problems. I ran into this stuff again, so I spent some time on the Internet to understand the principles. Originally this is called CSS Sprites technology, mainly personal hobbies, I am interested in the foreground of these things, so will go to learn a little more.

Nonsense not much to say, directly on the small example I do:

This is a picture of multiple small backgrounds, and when we want to show only the areas we need on the page, we need to "cut" them out.

Java code

1. <style type="Text/css" >
2. . div_5758{
3. width:19px;
4. height:20px;
5. Background:url ("image/menu.png") no-repeat;
6. background-position:-71px-18px;}
7. </style>

Java code

1. <div class=div_5758></div>

This code is to extract the picture of the Red Fork in the merged picture.

This is the time to think about why we do this, this thing Baidu, you know, I will simply say.

Merging pictures reduces the number of images, which reduces the number of times a page requests a picture, and when it is in a normal network, the load time required for a single picture of less than 200KB is similar. In this case, the load efficiency of the page will be increased.

Technology is endless, here with you.