Self-understanding of the background-position attribute in background image positioning

Recently, I need to use a lot of fragmented pictures such as labels and buttons in the project. In addition, I have never had the opportunity to use the "elf technology" in CSS. Here I write my understanding of background-position into a document for more people to use and learn.

The combination of all existing button images

Step 1 : We want to display　This button, then we must first define a div (later called the window) tag, the width and height of which should just be able to hold this button.

Step 2 : This is the focus of my talk today. Many people say that background-position is the background image of the operation, but I say it is the window of the operation. Through the window we can only see a part of the background image .

The understanding of the horizontal and vertical coordinates is that as long as the window moves within the area of ​​the image, we say it is in the negative direction (negative coordinates).

show For this image button, we don't need to specify the coordinates, it is the default. Of course you can also #div5{background-position: 0px 0px;}

show For this image button, you must set the background-position coordinates, #div6{ background-position:-42px 0px;}

show This image button, #div8{ background-position:-42px -41px;}

The same applies to the following.

Many of you may understand what I am saying here. I am just telling you a way of understanding for those who are just getting started. If there is anything wrong, please criticize me. (I don’t know how to typeset, hope you understand)