How does the background-url attribute of css calculate the position of each small image in the image? _html/css_WEB-ITnose

For example, if there are three small stars of different colors in a png, how can we accurately write the pixel position of each small star?
As shown in the picture

Reply to discussion (solution)

background-position

 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>

http://64.233.171.161/
Search css image position
and get:

http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html

http://www.w3school.com.cn/cssref/pr_background-position.asp

http://www.wibibi.com/info.php?tid=79

Yes A picture combining tool that can generate css.

 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>

The explanation here is very good, but it does not say the coordinates of the origin in the upper right corner of the picture (?) and put it in the specified position (?).

 <div style="background: url(http://img.bbs.csdn.net/upload/201411/20/1416475573_323694.png) no-repeat 0px -30px;width:100px;height:34px"></div>

This article talks about it very well, but it doesn’t say the coordinates (?) of the origin in the upper right corner of the picture and put it in the prescribed position. (?).
That one can only be controlled by height