How to use css sprites?

CSS Sprites are called css sprites by many people in China. They are a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. .

How to use CSS

CSS Sprites actually integrate some background images on the web page into one image file , and then use the combination of CSS "background-image", "background-repeat", and "background-position" to position the background. Background-position can use numbers to accurately position the position of the background image.

In web page access, the client will send a request to the server every time it needs to access a picture. Therefore, the more pictures are accessed, the more requests are made, and the greater the possibility of delay. .

Therefore, the key to accelerating CSS Sprites technology is not to reduce the quality, but to reduce the number. Of course, the accompanying increase in memory consumption, cumbersome synthesis of CSS Sprites images and other shortcomings will not improve the performance of the website. , it is no longer enough.

css sprites Scope of application:

1, it is necessary to accelerate the web page by reducing the number of http requests.

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

3. There are pictures that need to be preloaded in the web page. Mainly the relationship between a and a:hover background image. If the background images of a and a:hover are loaded separately, then the user's mouse will move over a button, and the button's background suddenly disappears and then comes back, causing "flickering". If the button text color is the same or similar to the background, Even more embarrassing, it may give people the illusion that the button has "disappeared".

Conditions that need to be met

In web design, it is best to follow a rule for pictures put together through this technology. Fixed width or height. It is best if the width and height can be determined. Pictures that need to be tiled are obviously not suitable for sprites.

The buttons in the picture above are of fixed width and fixed height.

If the width is fixed, several small pictures can be arranged in parallel. If the height is fixed, the small pictures will be arranged vertically.

If the background is neither wide nor high and the css sprites technology is forced to be used, it is easy to produce a state of "images that should not appear on the page". If it is "forced to set the height", it will also be very detrimental to future maintenance.

The above is the detailed content of How to use css sprites?. For more information, please follow other related articles on the PHP Chinese website!