Posts in current category

CSS image flattening technology


May 03, 2021 23:00 CSS


Table of contents


CSS image flattening technology


Image flattening

Image flattening is a collection of individual images.

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

Using image flattening reduces the number of requests from the server and saves bandwidth.


Image flattening - a simple example

Instead of using three separate images, we use this individual image ("img_navsprites.gif"):

CSS image flattening technology

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

In the following example CSS specifies a portion of img_navsprites.gif "Below" display:

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

Try it out . . .

Instance resolution:

  • the src property defines only a small transparent img_trans.gif image src it cannot be empty. The image displayed will be the background image we specified in CSS
  • Width: 46px; H eight: 44px; - Define the 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 flatten with images, and now we use links and hover effects.


Image flattening - Create a navigation list

We want to use "img_navsprites.gif" to create a navigation list.

We'll use an HTML list because it can be linked, while also supporting 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;}

Try it out . . .

Instance resolution:

  • #navlist{position:relative;} Position settings are relatively positioned to allow absolute positioning inside
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} margin padding 0, list styles are removed, and all list items are absolutely positioned
  • #navlist li, #navlist a{height:44px;display:block;} The height of all images is 44px

Now start positioning and style for each specific section:

  • #home{left:0px;width:46px;} way 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, top 0px)
  • #prev{left:63px;width:43px;} Left margin Position 63px (some extra space between #home宽46px plus items) with a width of 43px.
  • #prev{background:url('img_navsprites.gif') -47px 0;} Defines the background image to position 47px to the right (#home宽46px 1px of the divider and divider)
  • #next{left:129px;width:43px;} Left margin Positioning 129px (#prev 63px #prev宽是43px s/ space), width is 43px.
  • >#next{background:url('img_navsprites.gif') no-repeat -91px 0;}
  • - Define the background image Position 91px to the right (#home 46px-1px split line, #prev宽43px-1px divider)

Image flattening - hover effect

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

CSS image flattening technology :hover selector is used for the effect of a display hovering over an element

Tips:
:hover selectors can be applied to all elements. In the CSS:hover selector section of this CSS reference manual, you can learn more about the use of the selector.

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

CSS image flattening technology

Because this is a single image, instead of six separate image files, there is no delay in loading when the user stays on the image.

Let's add a hover effect with only three lines of code:

#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 out . . .

Instance resolution:

  • Because the list item contains a link, we can use :hover pseudo-class
  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} all three hover images, we specify the same background position, just 45px each down