CSS Image Stitching
Image Stitching
Image stitching is a collection of single images.
A web page 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 - A Simple Example
Instead of using three separate images, we use this single image ("img_navsprites.gif"):
With CSS, we can display only part of the image we need.
In the following example, the CSS specifies to display part of the image of "img_navsprites.gif":
Example
<style>
img.home {
width: 46px;
height: 44px;
background: url(/demos/img_navsprites.gif) 0 0;
}
</style>
<body>
<img class="home" src="/demos/img_trans.gif">
</body> Try It!
Analysis:
<img class="home" src="img_trans.gif" /> - Because it cannot be empty, the src attribute only defines a small transparent image. The displayed image will be the background image we specified in CSS.
Width: 46px; Height: 44px; - Defines the part of the image we are using
background:url(img_navsprites.gif) 0 0; - Define the background image and its position (left 0px, top 0px)
This is the easiest way to use image stitching, now we use link and hover effects.
Image Flattening - Create A Navigation List
We want to use a flattened image ("img_navsprites.gif") to create a navigation list.
We will use an HTML list because it can be linked and it also supports background images:
Example
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('/images/img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('/images/img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('/images/img_navsprites.gif') -91px 0;}
</style>
<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>Example Analysis:
#navlist{position:relative;} - The position is set relative to the position, so that the inside is absolutely positioned
#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 start the positioning and style of each specific part:
#home{left:0px;width:46px;} - The method of positioning to the leftmost side, and the width of the image is 46px
#home{background:url(img_navsprites.gif) 0 0;} - define the background image and its position (left 0px, top 0px)
#prev{left:63px;width:43px;} - The right positioning is 63px (#home width 46px + some extra space between items), the width is 43px.
#prev{background:url('img_navsprites.gif') -47px 0;} - defines 47px on the right side of the background image (#home width 46px + 1px of the dividing line)
#next(left:129px;width:43px;) - Right positioning is 129px (#prev 63px + #prev width is 43px + remaining space), width is 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Define the right 91px of the background image (#home 46px+1px dividing line + #prev width 43px+1px dividing line)
Image Flattening - Hover Effect
Now, we want to add a hover effect to our navigation list.
 | : hover selector - for effects when hovering on the display element Tips: : hover can be applied to all selector elements. |
|---|
Our new image ("img_navsprites_hover.gif") contains three navigation images and three images:
Because this is a single image instead of 6 separate image files, there will be no delay in loading when the user stays on the image.
We add only three lines of code to add hover effects:
Example
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>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, but each one is moved down 45px.