How does CSS use image flattening technology?

This chapter will introduce to you how to use image stitching technology in CSS? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Image stitching

Image stitching is a collection of single images.

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

Using image stitching will reduce the number of server requests and save bandwidth.

2. Image splicing - simple example

Instead of using three independent images, it is better to 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 part of the image that displays "img_navsprites.gif":

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

Example analysis:

• -Because it cannot be empty, the src attribute only defines a small transparent image. The image displayed will be the background image we specified in CSS

• Width: 46px; Height: 44px; - Define that part of the image we use

• 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 links and hover effects.

3. Image stitching - Create a navigation list

We want to use stitched images ("img_navsprites.gif") to create a navigation list.

We will use an HTML list because it can be linked and also supports background images:

#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;}

Example analysis:

• #navlist{position :relative;} - Position sets relative positioning, making 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, and all list items are absolutely positioned

• #navlist li, #navlist a{height:44px;display:block ;} - The height of all images is 44px

Now onto the positioning and styling of each specific section:

• #home{left:0px ;width:46px;} - Position the image to the far left and the width of the image is 46px

• #home{background:url(img_navsprites.gif) 0 0;} - Define the background Image and its position (0px left, 0px top)

• #prev{left:63px;width:43px;} - positioned 63px on the right (#home width 46px between items some extra space) with a width of 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)

4. Image stitching - hover effect

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

:hover selector is used to display the effect when the mouse is hovering over the element.

Tip: The :hover selector can be applied to all 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 lazy loading when the user hovers over the image.

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

#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;}

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 each further down

The above is the detailed content of How does CSS use image flattening technology?. For more information, please follow other related articles on the PHP Chinese website!