I read an article on the front-end observation (http://www.qianduan.net/to-sprite-or-not-to-sprite.html), I am here a small induction.
First, we will introduce CSS spirits. The basic principle of CSS Sprite is to integrate some images used on your website into a single image, thus reducing the number of HTTP requests for your website. This image is rendered using the CSS background and background-position attributes (it is worth mentioning that this means that your tag becomes more complicated and the image is defined in CSS, rather than the label ).
The benefit of CSS spirits is to increase the page loading speed.
However, if we do not process the image, it will be counterproductive. At present, many browsers have the full page scaling function, so the browser needs to do some extra work to correct the behavior of these image edges-basically, to avoid image exposure in Sprite ". In addition, if the integrated images have a large area of white space or are integrated with images of different heights, it will only cause the burden on the browser and cause a waste of memory. The following are some shortcomings of CSS sprite mentioned in this article: Images called by CSS sprite cannot be printed unless the print statement is added to @ media -- by richb; if you want to modify an image in Sprite, You need to modify the entire image, which will undoubtedly increase the workload-by Tom B.
I personally thinkIt is quite effective to integrate images of similar sizes, such as small icons in the navigation bar. CSS spirits is useful as long as it is handled properly.
In addition, in the message of this article, we also raised the following question: cannot repeat and no-repeat images be put together? The answer is that it is normal to put no-repeat and repeat-X together. However, you must be careful when placing the repeat-X and repeat-y images together.
I will post another article about CSS spirits, CSS Sprites: shark fin or three deer. The author advocates that CSS should not be abused!