Please tell me about the positioning of background images in CSS_html/css_WEB-ITnose

Dear experts, good morning everyone!
I am a novice and would like to ask you about the positioning of background images in CSS. I heard from the tutorial that the current background images, for the sake of speed and response, integrate many images that need to be used into one large image. When used, it is necessary to locate the parts that need to be used in the entire large background image. For example, here is a large image. Background image,

has a lot of things on it. If I want to locate the things I need to use, how do I determine the position (background-position) of the image in the entire image? I use the ruler. Come and measure? How precise is the amount? Or is there a convenient and quick way to measure it? In addition, when I use it on a specific page, how do I determine the position of the picture in the entire page? Thank you.
For example, there is a line of positioning code for the picture above, which is used to position the fourth small blue background box on the right.

background-image: url("http://i.imgur.com/iavER.png");background-position: -228px -136px;background-repeat: no-repeat;border: medium none currentColor;color: #FFFFFF !important;font-weight: 700;height: 16px;line-height: 16px;width: 20px;

Reply to the discussion (solution)

Usually it is done in PS Ruler to measure

Use the selection tool of PS to measure the distance, and then press ctrl i in the information panel to get the value.
In fact, sometimes the stupidest way is actually the fastest way.

Floor 2 is right. Just use PS tools. In fact, sometimes the stupidest way is actually the fastest way.

Measure it...

Visually measure a rough value
Then fine-tune the effect in firebug and other tools to achieve the best effect

1, 2, 3 floors