Home > Article > Web Front-end > what is css sprite
what is css sprite
- 青灯夜游Original
- 2021-05-12 16:44:442580browse
css sprite is a way to handle background images on web pages. It actually includes all the scattered pictures involved in a page into one big picture, and then applies the big picture to the web page; in this way, when the user visits the page, he only needs to send a request to the service, and the The background image can be fully displayed.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
What is a css sprite?
"CSS sprite", also known as usually interpreted as "CSS image stitching", "CSS map positioning" or "CSS image sprite", "CSS sprite", is A web image application processing method. In fact, it is to include all the scattered pictures involved in a page into one large picture. In this way, when the page is accessed, the loaded pictures will not be displayed slowly one by one as before. .
When the user visits the page, he only needs to send a request to the service, and all the background images in the web page can be displayed.
For example:
Advantages
Using CSS Sprites can effectively reduce the http requests of web pages, thus Greatly improve the performance of the page, which is also the biggest advantage of CSS Sprites and the main reason why it is widely spread and applied;
CSS Sprites can reduce the bytes of images. I have compared The bytes of merging three pictures into one picture many times are always smaller than the sum of bytes of these three pictures.
Solve the problem of web designers in naming pictures. They only need to name a collection of pictures. There is no need to name each small element, thereby improving Improve the efficiency of web page production.
It is easy to change the style. You only need to modify the color or style of one or a few pictures, and the style of the entire web page can be changed. Maintenance is more convenient.
Use of sprite technology
css sprite (sprite) is actually to merge multiple images into one Inside the picture, the background of the web page is laid out through CSS background positioning technology. When images need to be used, the current stage is to use the CSS attribute background-image combined with background-repeat, background-position, etc. to display the image.
Example:
Sprite analysis:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div{
margin: 5px;
}
.sprites span{
float: left;
width: 20px;
height:20px;
background: url('./images/icon.png');/* 引用精灵图 */
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0 !important;
}
.sprites3{
background-position: 0 -20px !important;
}
.sprites4{
background-position: -20px -20px !important;
}
.sprites5{
background-position: -40px 0 !important;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>存款图标</div>
<div><span class="sprites3"></span>删除图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
</div>
</body>
</html>
The above is the detailed content of what is css sprite. For more information, please follow other related articles on the PHP Chinese website!