Home > Developer > Web Develop
First explain the CSS sprites is what: there is called CSS Sprite, there is called CSS Sprite, whatever the name, his role is to put a lot of small icons on the Web page in a picture, and then through the CSS inside the background-position to control the coordinates of each picture, so not only reduce the HTTP request, but also reduce the size of the picture, speed up the loading of pictures , for the front-end development of friends is the necessary skills. More detailed explanation please to "Baidu encyclopedia" onlookers.
Sprite Usage Scenarios
1. Static picture, does not change with the user information changes
2. Small picture, picture size is smaller
3. Load ratio is large
Note: Some big pictures, there is a dynamic film without using Sprite diagram
How to use sprite diagram
1. Use the Background-position property inside the CSS to control the position of the background map to display the desired icon in different locations.
2.
(It is a picture on the teaching video of Mu class network, here to borrow it), the background map is placed in a coordinate system, the upper left corner as the starting point. the small image (x, y) of the flattened background map is negative, for example, if you want to show the skirt in the black border of the picture, just: skirt: {background-position:-100px,0;}. Because the "skirt" has only an x-axis offset, there is no y-axis offset.
Sprite Diagram Implementation method
1. First step: Complete the layout of the background map (integrate the small picture you need to display on a picture)
Photoshop Manual puzzle: Complete the desired background map in PS, take the size of each small image and record it, and save the background image in PNG format.
When the project or Web site is larger, it may not be realistic to use PS to take a volume. You can use the Sprites tool to automatically generate coordinate points for small images. Recommended a sprites tool automatic generation tool--cssgaga, is a Windows system automatically generated sprite diagram of a tool, specifically use also please crossing online self-search. : http://www.99css.com/archives/1524
2. Below is a sprite example of the code I do, crossing can copy to see the effect.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Sprite Chart </title>
<style>
H3,ul {
margin:0;
padding:0;
}
UL {
List-style:none;
}
Li H3 {
font-size:14px;
font-weight:400px;
}
Li {
Display:block;
height:40px;
line-height:35px;
Overflow:hidden;
/*border:0.5px solid #dedede;
}
. LOGO {
width:160px;
Background: #f8f8f8;
}
Li I {
Background:url (sprite.png);
Display:inline;
width:45px;
height:35px;
Float:left;
margin:3px 10px 0 0;
}
. logo-1 i{
background-position:0 0;
}
. logo-2 i{
Background-position:0 -35px;
}
. logo-3 i{
Background-position:0 -73px;
}
. logo-4 i{
Background-position: -60px 3px;
}
. logo-5 i{
Background-position: -60px-35px;
}
. logo-6 i{
Background-position: -60px-108px;
}
. logo-7 i{
Background-position: -60px-145px;
}
. logo-8 i{
Background-position: -60px-185px;
}
</style>
<body>
<div class= "LOGO" >
<ul>
<li class= "Logo-1" >
<i></i>
</li>
<li class= "Logo-2" >
<i></i>
</li>
<li class= "Logo-3" >
<i></i>
</li>
<li class= "Logo-4" >
<i></i>
</li>
<li class= "Logo-5" >
<i></i>
</li>
<li class= "Logo-6" >
<i></i>
</li>
<li class= "Logo-7" >
<i></i>
</li>
<li class= "Logo-8" >
<i></i>
</li>
</ul>
</div>
</body>
3. Pictures used
Crossing need to convert the conversion to PNG format. (The value of the Background-position attribute can be adjusted on demand)
This article for personal writing, if there are errors, also please crossing understanding!
How to use CSS sprites--Sprite chart
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
