Display multiple backgrounds with one image in css-PHP development

I wonder if you have ever seen some pretty icons on the webpage, such as the list icon, So I downloaded it and opened it. It wasn't a single icon we downloaded, but a big image, there are many small icons on it! Here we use the method of Displaying Multiple backgrounds in an image in CSS. Why are these small icons not separately stored as separate icons, but placed together on one image? The purpose is to reduce the number of http requests and save time and bandwidth. This method is strongly recommended! Of course, there are many ways to implement it. I will use an example below to show whether you have experienced some beautiful icons on the web page, such as the list icon, and download it, open it and you can see that it is not a single icon we downloaded, but a large image with many small icons on it!
Here, the method of Displaying Multiple backgrounds in an image in CSS is used.
Why are these small icons not stored as separate icons, but placed on an image? The purpose is to reduce the number of http requests and save time and bandwidth.
This method is strongly recommended!
Of course, there are many implementation methods. The following is an example of the methods I often use.
1. Display complete images

(1)

Code:

Key code:

POSITION: relative; WIDTH: xpx; BACKGROUND: url(image) x1px y1px; FLOAT: left; HEIGHT: ypx;

POSITION attribute description:
Relative-relative positioning
WIDTH -- the image display WIDTH
Image -- background image (here is the image address)
X1px -- horizontal offset of the image. The start point is (0, 0). If a negative value is used, the image is offset to the inverse direction.
Y1px --- vertical offset of the image
FLOAT -- FLOAT of an image, such as left or right
HEIGHT -- the HEIGHT of the image.

Now we will show different regions of the image for the reference object in the above position.
1.1. Only "W" in the image is displayed'

(2 ):

The image shows part WIDTH: 75px, HEIGHT: 60px, and the horizontal offset of the image to the left is 3px. Code:

.bg .logo {           POSITION: relative; WIDTH: 75px; BACKGROUND: url(./logo.gif) -3px 0px; FLOAT: left; HEIGHT: 60px;       }

1.2. Only one "B" in the image is displayed. (3)

The image shows part WIDTH: 38px, HEIGHT: 60px, the horizontal offset of the image to the left is 78px, and the vertical offset is 120px. Code:

.bg .logo {     POSITION: relative; WIDTH: 38px; BACKGROUND: url(./logo.gif) -78px 120px; FLOAT: left; HEIGHT: 60px }