CSS Sprites technology zt learn web standards in ten days (div css)_html/css_WEB-ITnose

CSS Sprites are called css sprites or css sprites by many people in China. It integrates some background images in the web page into an image file, and then uses CSS background images to position them where they are to be displayed. This can reduce file size, reduce the number of requests to the server, and improve efficiency.

Before talking about CSS Sprites, let’s clarify the background image first

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

The abbreviation of css background attribute is as shown above, #ccc represents the background color; url() is the background image path; the next two numerical parameters are left and right and up and down respectively, and the first parameter indicates the distance from the left px, the second parameter indicates the distance, which is different from the abbreviation of padding, so don’t confuse it. In addition, I would like to emphasize that the CSS value of 0 does not need to have a unit, and other values ​​​​must have units (when the line-height value is multiple, except for zoom and z-index); no-repeat indicates in which direction the background image is repeated. This Time is not repeated.

It should be noted that the parameters for positioning the image are based on the upper left corner of the image as the origin. Once you understand this, you will basically understand the CSS Sprites technology