CSS Sprites image unclear problem (how to resize CSS Sprites twice)

I'm going. This title is very long. I thought about it for a long time. In fact, the content of this article is simply in the Retina screen, the general picture will not appear clear, so we need to scale the image to 50% 2X (because the physical resolution will not change) to ensure clarity. The font icons that appeared later solved the problem of 2X enlargement, but some complicated images still could not be replaced by font icons, so we returned to the problem of 2X. When there are more than 2X images, the loading speed will be affected. In normal images, we can use CSS Sprites to solve the problem perfectly, however, when a picture is placed with several 2X coordinates, there is another scaling problem. The focus of this article is to solve this problem.

Instance image

First, let's take a look at the example image:

Here we want to show that the background of the image is transparent, and the white color is for your convenience ~

The eight identical 2X images are seamlessly merged.

Zoom size

Here is the key part of this article. Images need to be scaled before they can be put in. When a single image is used, we use CSS directly.Background-size: 50%But now it doesn't work, because the current 50% actually looks like the following figure:

What should we do? Very simple.

First, if the size of your icon is different, set the space of each icon to the largest one, and then place the original icon in the upper left corner:

Make sure that the space of each image is Square (note that the space is not the specific size of the image), and remember the side length of each space.

Put the CSS Background-sizeAdjusted X00 %, Where XIndicates the number of icons in a column with a large number of icons.

As shown in the preceding example, there are four icons in each horizontal bar, two icons in each vertical bar, and a large number of horizontal bars are used. XIs 4, Background-sizeThat is 400%

Call size

After scaling is completed, you should call it. The column calls the "classification black" icon in the second column of the first row in the preceding figure. Its size is 102px, but I want it to display a physical resolution of 44px, first, get a label with a length of 44px and coordinates (background-position) of 44px (X axis) and 0 (Y axis ).

This is a perfect display and solves the small embarrassment of CSS Sprites.