Home > Developer > Web Develop
The small pieces of the image are stitched together into a larger picture to use, in order to reduce the number of browser HTTP requests to improve the load speed of the page.
Each request for a picture requires a connection to the server, and the maximum number of concurrent requests for the browser is limited. Using sprite maps does not reduce the amount of data that is transferred, but it can speed up the loading of a webpage by saving a portion of the time it takes to establish and close the connection.
※ Direct manual splicing, as long as the need to use the small picture in a picture can be, of course, stitching should try to follow the principle:
Try to get this picture to be maintained later;
In the premise of ensuring maintainability, as little as possible in the picture to leave a large area blank;
※ using the generating tools, such as Cssgaga, see http://www.99css.com/cssgaga/
2.2 How to use Sprite chart?After getting the sprite chart, if the use of manual splicing, the use of tools such as PS to measure the specific coordinates, if it is generated automatically using the Build tool, the results should be brought in the previous small picture of the coordinates.
The way to use sprite chart is to use Background-image:url ("Foo.png") to set the background image of the element, and then use the Background-position:x-shift y-shift to slide the picture.
A simple example of using Sprite graphs:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>CSS Sprite Demo</title> <styletype= "Text/css"> /*side bar Container Div*/. Nav-bar{width:250px; } /*side bar List style*/. nav-list Li{List-style:None;padding:10px;Border:1px solid #DDD; } /*style of sprite icon*/. nav-list Li I{Background-image:URL ("imgs/sidebar.png");Display:Inline-block;width:30px;Height:24px;float: Left; } /*Shoe bag Accessories*/. Nav-list Li:nth-child (2) I{background-position:0px-24px; } /*Sports Outdoor*/. Nav-list Li:nth-child (3) I{background-position:0px-48px; } /*Jewellery Watches*/. Nav-list Li:nth-child (4) I{background-position:0px-72px; } /*Mobile Phone Digital*/. Nav-list Li:nth-child (5) I{background-position:0px-96px; } /*Home Appliances Office*/. Nav-list Li:nth-child (6) I{background-position:0px-120px; } /*Skincare Makeup*/. Nav-list Li:nth-child (7) I{background-position:0px-144px; } /*Maternity Products*/. Nav-list Li:nth-child (8) I{background-position:0px-168px; } </style> </Head> <Body> <Divclass= "Nav-bar"> <ulclass= "Nav-list"> <Li><I></I>Apparel underwear</Li> <Li><I></I>Shoe Bag Accessories</Li> <Li><I></I>Sports Outdoor</Li> <Li><I></I>Jewellery watches</Li> <Li><I></I>Mobile phone Digital</Li> <Li><I></I>Home Appliances Office</Li> <Li><I></I>Skincare Makeup</Li> <Li><I></I>Maternity Products</Li> </ul> </Div> </Body></HTML>
：
Sprite Chart:
3. Summary3.1 The principle of Sprite diagram?
The vertex in the upper-left corner as the origin of the location.
If the x offset is negative, move to the right.
If the y offset is negative, move down.
The original image is not cropped, it is still large, it is there, just the excess part is hidden, equivalent to sliding the picture.
3.2 Properties related to
Background-image:url ("Imgs/sidebar.png");
Background-position:x-shift Y-shift;
Background-position-x: X-shift;
Background-position-y: Y-shift;
3.3 When is it appropriate to use a sprite chart?
The graph is static and does not change as the user information changes.
Small images, smaller in size, mainly to reduce the number of HTTP requests.
Related Generate Sprite tool:
Cssgaga
http://www.99css.com/cssgaga/
Generate Sprite Chart Online:
http://alloyteam.github.io/gopng/
http://csssprites.com/
Resources:
1. Web Video Tutorial http://www.imooc.com/learn/93
2. Explanation of StackOverflow: Http://stackoverflow.com/questions/3889661/whats-this-negative-value-in-this-css-property
CSS Sprite Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
