Background Image Merging

Using background image merging technology can reduce the number of images and reduce HTTP requests, which plays an important role in website acceleration. Advantages of background image merging:

A) It can be expanded to facilitate post-maintenance. It is easier to maintain when typographical changes occur.

B) Adaptive width reduces the page workload. Background Image merging can be combined with adaptive width, greatly reducing the number of pages and image size, and improving the page loading speed.

Example:

 

CSS style: . AAA {Height: 34px; float: Left; Background: URL ("images/I .gif") 0-34px repeat-X ;} . BBB {Height: 34px; Background: URL ("images/I .gif") 0 0 no-Repeat ;} . CCC {Height: 34px; Background: URL ("images/I .gif") Right-68px no-Repeat; line-Height: 34px ;}

HTML code: <Div class = "AAA"> <Div class = "BBB"> <Div class = "CCC"> menu </div> </Div> </Div>

 

Effect implementation:

Implementation principle: intercept the left, middle, and right sides of the navigation background image, and use the middle to tile the image. Then, place the left and right sides of the image, and use layer-3 nesting.