Home > Article > Web Front-end > How CSS Sprite implements image stitching technology
How CSS Sprite implements image stitching technology
- 不言Original
- 2018-07-21 10:38:471691browse
This article shares with you how to implement image stitching technology with Css Sprite. The content is very good. Friends in need can refer to it. I hope it can help everyone.
1. Sprite usage scenarios:
2. Css Sprite (Advantages)
Reduce image size.
Reduce the http requests of the web page, thereby greatly improving the performance of the page.
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.
3. Implementation principle
css background-position
Control what a layer can display Area range size,
Sliding the background image through a window
Example:
The code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>background-position<</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<span class="oo span1"></span>
<span class="oo span2"></span>
<span class="oo span3"></span>
<span class="pp span4"></span>
<span class="ll span5"></span>
<span class="hh span6"></span>
</body>
</html>
.body{
margin:0 auto;
text-align:center;
}
.oo{
display:block;
width:43px;
height:44px;
background:url(images/img_navsprites_hover.gif) no-repeat;
margin:20px auto;
}
.span1{
background-position:0 0;
position:absolute;
top:0px;
}
.span2{
background-position:-47px 0;
position:absolute;
top:0px;
left:60px;
}
.span3{
background-position:-94px 0;
position:absolute;
top:0px;
left:120px;
}
.span1:hover{
background-position:0 -45px;
}
.span2:hover{
background-position:-47px -45px;
}
.span3:hover{
background-position:-94px -45px;
}
.pp{
display:block;
width:38px;
height:38px;
background:url(images/pwd-icons-new.png) no-repeat;
margin:20px auto;
}
.span4{
background-position:-48px -96px;
}
.ll{
display:block;
width:24px;
height:26px;
background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
margin:20px auto;
}
.span5{
background-position:0 -483px;
}
.hh{
display:block;
width:18px;
height:18px;
background:url(images/toolbars.png) no-repeat;
margin:20px auto;
}
.span6{
background-position:-95px -211px;
}**background-position:npx npx;
(The first value is to adjust the left and right. When you need to adjust the background image to the right, use a positive value, and to the left, use a negative value. In the same way, move the background image up and down. When adjusting, use negative values for the upper part and positive values for the lower part)**
The rendering is as follows:
(This is the original picture)
(This is the picture after the selection)
The first picture is the conversion of the original picture and the dark picture; the lock of the second picture is selected; the fourth picture The train in the picture; the villain in the fifth picture.
Related recommendations:
How to use CSS to achieve the effect of rounded borders
How to use CSS3 to achieve text origami Effect
The above is the detailed content of How CSS Sprite implements image stitching technology. For more information, please follow other related articles on the PHP Chinese website!