Home > Article > Web Front-end > About CSS image stitching technology
About CSS image stitching technology
- 不言Original
- 2018-06-12 15:05:571389browse
This article mainly introduces the CSS image stitching technology, which has certain reference value. Now I share it with everyone. Friends in need can refer to it
Image stitching is a collection of single images .
Web pages with many images may take a long time to load and generate multiple server requests.
Using image stitching will reduce the number of server requests and save bandwidth.
Image stitching--create a navigation list
<!DOCTYPE html>
<html>
<head>
<title>自学教程(如约智惠.com)</title>
<meta charset="utf-8">
<style>
#navlist {position:relative;}
#navlist li{
margin:0px;
padding:0px;
list-style:none;
position:absolute;
top:0px;
}
#navlist li, #navlist a{
height:44px;
display:block;
}
#home {
left:0px;
width:46px;
background:url('./images/img_navsprites.gif')0 0;
}
#prev {
left:63px;
width:43px;
background:url('./images/img_navsprites.gif')-47px 0;
}
#next {
left:129px;
width:43px;
background:url('./images/img_navsprites.gif')-91px 0;
}
</style>
</head>
<body >
<ul id="navlist">
<li id="home"><a href="/"></a></li>
<li id="prev"><a href="/css/"></a></li>
<li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>Example analysis:
#navlist{position:relative;} - The position is set to relative positioning, so that the absolute positioning inside
#navlist li{margin:0;padding:0; list-style:none;position:absolute;top:0;} - margin and padding are set to 0, the list style is deleted, and all list items are absolutely positioned
navlist li, #navlist a{height:44px;display:block;} - The height of all images is 44px
Now let’s start positioning and styling each specific part:
#home{left:0px;width:46px;} - Positioned to the far left, and the width of the image is 46px
#home{background:url( img_navsprites.gif) 0 0;} - defines the background image and its position (left 0px, top 0px)
#prev{left:63px;width:43px;} - right Positioned 63px (#home width 46px with some extra space between items), width 43px.
-
#prev{background:url('img_navsprites.gif') -47px 0;} - Define the background image 47px to the right (#home width 46px 1px of the divider)
#next{left:129px;width:43px;}- The right position is 129px (#prev 63px #prev width is 43px and the remaining space), the width is 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Define 91px on the right side of the background image (#home 46px 1px dividing line #prev width 43px 1px dividing line)
Image stitching--hover effect
<!DOCTYPE html>
<html>
<head>
<title>自学教程(如约智惠.com)</title>
<meta charset="utf-8">
<style>
#navlist {position:relative;}
#navlist li{
margin:0px;
padding:0px;
list-style:none;
position:absolute;
top:0px;
}
#navlist li, #navlist a{
height:44px;
display:block;
}
#home {
left:0px;
width:46px;
background:url('./images/img_navsprites_hover.gif')0 0;
}
#home a:hover {
background:url('./images/img_navsprites_hover.gif')0 -45px;
}
#prev {
left:63px;
width:43px;
background:url('./images/img_navsprites_hover.gif')-47px 0;
}
#prev a:hover {
background:url('./images/img_navsprites_hover.gif')-47px -45px;
}
#next {
left:129px;
width:43px;
background:url('./images/img_navsprites_hover.gif')-91px 0;
}
#next a:hover {
background:url('./images/img_navsprites_hover.gif')-91px -45px;
}
</style>
</head>
<body >
<ul id="navlist">
<li id="home"><a href="/"></a></li>
<li id="prev"><a href="/css/"></a></li>
<li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>Example analysis:
Since the list item contains a link, we can use:hover pseudo-class
home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - For all three hover images, we specify the same background position, just 45px further down each Learning will be helpful. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Use css to achieve shadow effects
The above is the detailed content of About CSS image stitching technology. For more information, please follow other related articles on the PHP Chinese website!