Html basics (4): the background image application skills in CSS.

Address: http://leotheme.cn/javascript/about-css-background.html

This is generally the case for background images in CSS:

1. Background: URL (images/*. GIF) No-Repeat;

However, when there are many images, like my Maxthon topic, a lot of background images and icons are used. at this time, if we do this, it will bring about a problem. The image will be loaded in a process. although very fast. however, some images are not loaded at the beginning, but are loaded only in response to mouse events. like my navigation bar. By default, a background is displayed. If you move your mouse over a background, the current page is displayed as another background.

If the image is still processed normally, you cannot see the image immediately after you move your mouse over it. so in Maxthon 2.0, I don't need to use the previous method. instead, we choose to place all the background images on one image. as shown below.

After the image is put together, you do not need to send a request to the server after the mouse is placed. Because the image has been loaded for the first time, no delay will be produced. this can also reduce the number of requests sent to the server to make loading faster.

Now, how can I define CSS after I put it on a graph?

Take my navigation bar as an example:
For example, when we are doing a graph, the top part of the image is the default back part, and the middle part is the part where the cursor is placed. the following is the current page number. the image height is 30px, and the total height of this image is 90px;
Then we write in CSS as follows:

[Sourcecode lang = "CSS"] # nav Li a {Background: URL (images/bg_nav.gif) 0 0 repeat-X;} default
# Nav Li A: hover {Background: URL (images/bg_nav.gif) 0-30px repeat-X ;}
# Nav Li A. Current {Background: URL (images/bg_nav.gif) 0-60px repeat-X;} [/sourcecode] of the current page Effect

The background image we define in CSS is the same image. we can locate it by changing the starting position of its Y coordinate. because our height is fixed to 30px, it is the same as the image height. and Tile it along the X coordinate. in this way, we can achieve the desired effect.