Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use sprites in CSS. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

How to use CSS

CSSSprites actually integrates some background pictures in the web page into a picture file, and then uses the combination of "background-image", "background-repeat" and "background-position" of CSS to locate the background. Background-position can accurately locate the background image with numbers.

In web page access, the client sends a request to the server every time it needs to visit a picture, so the more the number of pictures visited, the more the number of requests, and the greater the possibility of delay.

Therefore, the key to the acceleration of CSSSprites technology is not to reduce the quality, but to reduce the number, of course, the subsequent increase in memory consumption, tedious synthesis of CSSSprites images and other shortcomings before the improvement of website performance.

Csssprites scope of application:

1. Web page acceleration needs to be achieved by reducing the number of http requests.

2. The web page contains a large number of small icons. Or, some icons are very versatile.

3. There are pictures that need to be preloaded on the web page. It is mainly the relationship between an and a:hover background map. If the background images of an and a:hover are loaded respectively, then the user will move the mouse over a button and the background of the button will suddenly disappear and come out again, resulting in a "flicker". If the text color of the button is the same or similar to the background, it will be even more embarrassing, which may give people the illusion that the button has "disappeared".

Conditions that need to be met

In web design, pictures pieced together by this technology had better have a rule. Set width or height. It would be better to fix the width and height. Images that need to be tiled are obviously not suitable for sprite.

For example, the buttons in the figure above belongs to the case of fixed width and height.

In the case of fixed width, several small pictures can be arranged in parallel. If you set the height, arrange the small pictures longitudinally.

If the background is not fixed width, nor fixed height forced to use csssprites technology, it is easy to produce "should not appear in the picture on the page" state. If it is "forced to set the height", it will also be very detrimental to future maintenance.

This is the end of the article on "how to use sprites in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.