Recently, I have been struggling with the meaning of the two numbers after no-repeat in CSS. I checked a lot on Baidu and found that everyone's understanding is different, and I saw different people's interpretations without knowing what it meant. Still can't find the correct answer;
After researching for a long time, here is the summary:
as a example:
background:url(../images/l_r_btn.gif) no-repeat -8px 9px;
Meaning: [background image] [not tiled] [background image moved 8 pixels to the left] [background image moved 9 pixels down]
Detailed interpretation:
Assuming that the background image is inside a div, set the upper left corner of the div tag to be the big origin (0, 0) , and the upper left corner of the background image to be the small origin (0, 0) (big origin and small origin are not professional terms, they are used by me Representing the names of the two upper left corners), the initial state is that the big origin and the small origin are coincident, the big origin is used as a reference, and the small origin moves according to the two numbers after no-repeat:
The first number represents moving in the horizontal direction (X axis): a positive number means moving to the right from the original position, and a negative number means moving to the left from the original position;
The second number represents movement in the vertical direction (Y axis): a positive number means moving down from the original position, and a negative number means moving up from the original position;