1, and the two value is the horizontal orientation in the front, which is called X axis orientation. The latter value is a vertical orientation. We call it y axis orientation. If there is only one value, the default is the direction of the X axis, when the Y axis is the upper and lower center alignment, that is, center. The origin of
2 and coordinate axis is the left vertex of the corresponding container.
3, the Y axis of this coordinate goes down, that is, the value of X Y in the lower right (inside the container) is positive. The values of
4 and X Y denote the value of the left vertex of the background image relative to the origin of the coordinates (that is, the left vertex of the container). The values of
5 and x y can be expressed in percentages or px.
6, x y can also be expressed in the five align ways of "left, right, top, bottom, center", but note that the use of "left, right, top, '," is the alignment rule, not the coordinate rule. X is left to represent the left of the picture and the left side of the container. For right, the right side of the picture and the right of the container are expressed. When y is top, the top of the picture is aligned with the top of the container. For bottom, the bottom of the picture is aligned with the bottom of the container, and the X Y and so on at center. When
7 and x y are expressed in percentages or Px, their values can be negative. When we apply the coordinate rules, it is easy to understand the meaning of negative representation. When x is negative, the left vertex of the picture is on the left of the left vertex of the container, and when the Y is negative, the left vertex of the picture is above the left point of the container. That is, to the left and upward, beyond the container.
below I use several illustrations to illustrate several cases. Blue blocks represent pictures, dashed boxes represent containers (div, TD, or directly body). Notice that only the background picture can be seen in the container. I use white to show the visible part, and beyond the scope of the container, I can't see it. It is expressed in grey. The coordinates of the left fixed point of the container are (0, 0).
first, background picture and capacity on the left, 0px 0px can also be written as left top
Second, background map in capacity In the middle, the fixed point coordinates are positive value
Third, the background map is on the left of the container and the fixed point coordinates are negative.