May 03, 2021 CSS
1. CSS image flattening technology
3. Image flattening - a simple example
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.
Instead of using three separate images, we use this individual image ("img_navsprites.gif"):
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:
Instance resolution:
src
it cannot be empty.
The image displayed will be the background image we specified in CSS
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.
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:
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 Width 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 width 46px 1px of the divider and divider)
#next{left:129px;width:43px;}
Left
margin Positioning
129px (#prev 63px #prev width is 43px s / space), Width is 43px.
>#next{background:url('img_navsprites.gif') no-repeat -91px 0;}
Now we want to add a hover effect to our navigation list.
: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:
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:
Instance resolution:
: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