CSS: CSS Image Flattening Technique

ylbtech-CSS: CSS image stitching technology

 

1.Back to top

1、

CSS  image stitching technology

---

image stitching

Image stitching is simply a collection of individual images.

Web pages with many images can take a long time to load and generate multiple server requests.

Using image stitching reduces the number of requests to the server and saves bandwidth.

---

Image Stitching - Simple Example

Instead of using three separate images, let's use this single image ("img_navsprites.gif"):

With CSS, we can display only the part of the image we need.

In the following example CSS specifies to display part of the image "img_navsprites.gif":

example

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

try it"

Example analysis:

• <img class="home" src="img_trans.gif" /> - Since it cannot be empty, the src attribute only defines a small transparent image. The displayed image will be the background image we specified in the CSS
• width: 46px; height: 44px; - define which part of the image we use
• background:url(img_navsprites.gif) 0 0; - defines the background image and its position (0px left, 0px top)

This is the easiest way to use image flattening, now we use link and hover effects.

---

Image Stitching - Create a Navigation List

We want to use a flattened image ("img_navsprites.gif") to create a navigation list.

We'll use an HTML list because it can be linked, while also supporting background images:

example

#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.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

try it"

Example analysis:

• #navlist{position:relative;} - position set relative positioning, let 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 removed, all list items are positioned absolutely
• #navlist li, #navlist a{height:44px;display:block;} - all images are 44px high

Now start positioning and styling each specific section:

• #home{left:0px;width:46px;} - way to position 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 (0px left, 0px top)
• #prev{left:63px;width:43px;} - right positioning 63px (#home width 46px + some extra space between items), width 43px.
• #prev{background:url('img_navsprites.gif') -47px 0;} - defines the background image to the right 47px (#home width 46px + divider 1px)
• #next{left:129px;width:43px;}- right position 129px (#prev 63px + #prev width is 43px + remaining space), width is 43px.
• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - defines the background image to the right 91px (#home 46px+1px divider + #prev width 43px+1px divider)

---

Image Flattening - Hover Effect

Now, we want to add a hover effect to our navigation list.

	The :hover selector is used for hover effects hints: The  :hover selector can be applied to all elements.

Our new image ("img_navsprites_hover.gif") contains three navigation images and three images:

Since this is a single image and not 6 separate image files, there will be no lazy loading when the user stays on the image.

We only add three lines of code to add the hover effect:

example

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

try it"

Example analysis:

• Since the list item contains a link, we can use the :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 down each

2、

2.Back to top

 

3.Back to top

 

4.Back to top

 

5.Back to top

1、

http://www.runoob.com/css/css-image-sprites.html

2、

 

6.Back to top

 

Author: ylbtech Source: http://ylbtech.cnblogs.com/ The copyright of this article belongs to the author and the blog garden. Reprints are welcome, but this statement must be retained without the author's consent, and a link to the original text should be given in an obvious position on the article page, otherwise Reserve the right to pursue legal responsibility.