Equivalence notation of background-position assignment
1, top left and left top equivalent to 0% 0%.
2, top, top center, center top is equivalent to 50% 0%.
3, right top, top right is equivalent to 100% 0%.
4, left, left center, center left is equivalent to 0% 50%.
5, center, center Center is equivalent to 50% 50%.
6, right, right center, center right is equivalent to 100% 50%.
7. Bottom left and left bottom equivalent to 0% 100%.
8, bottom, bottom center, center bottom equivalent to 50% 100%.
9, bottom right, right bottom equivalent to 100% 100%.
Second, the background image positioning we want to clear the points
1, two values the front one is the horizontal positioning, we call the x-axis orientation. The latter value is the longitudinal orientation, which we call the y-axis orientation.
If there is only one value, the default is the x-axis direction,
At this point the y-axis is the default alignment, which is center.
2, the original point of the axis is the corresponding container left vertex.
3, the y-axis of the coordinates of the arrow face down, that is, the lower right (inside the container) x Y value is positive.
4, x y values indicate the value of the left vertex of the background image relative to the coordinate origin (that is, the left vertex of the container).
5, the value of x Y can be expressed as a percentage or px.
6, x y can also be used "left, right, top, bottom, center" the five alignment to express,
Note: When represented by left, right, top, bottom, center, the alignment rules are applied instead of the coordinate rules.
X is left to indicate the right side of the picture and the left side of the container, which means the
When Y is top, the top of the picture is aligned with the top of the container,
When bottom indicates that the bottom of the picture is aligned with the bottom of the container, x y equals center is the center alignment.
7. When x y is expressed as a percentage or PX, its value can be negative. We can easily understand the meaning of negative numbers by applying coordinate rules,
When x is negative, the left vertex of the picture is left on the left vertex of the container.
Y is negative to indicate that the left vertex of the picture is above the left point of the container. That is, left and up beyond the scope of the container.
Reference: Use of Background-position http://www.studyofnet.com/news/960.html
The use of background-position in CSS