Detailed use of CSS background map coordinate positioning and negative skills

CSS background image positioning in the layout process, especially when the background map more widely used, in this article for everyone in detail about the background map positioning knowledge and why there are negative, interested friends can refer to the next

What we want to make clear in the background image positioning:

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, then the default is the x-axis direction, then the y-axis direction is the default is the upper and lower center alignment, that 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, but note: with "left, right, top, bottom, center" to represent the time, the application is the alignment rules, not the coordinate rules. X is left to indicate that the right side of the picture is aligned with the left side of the container, that is, when it is, and right, that the top of the picture is aligned with the top of the container, and y is the upper part of the image, and that the bottom of the picture is aligned with the bottom of the container, bottom, X Y equals Center when Center is aligned.

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 the coordinate rules, which indicates that the left vertex of the picture is left at the left vertex of the container, and 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.

Below I use a few illustrations to illustrate a few cases, the blue block represents the picture, the dotted box indicates the container (can be p,td, or directly body), note that only the background picture in the container we can see, I use white to represent the visible part, and beyond the scope of the container is invisible, I use the gray expression. The coordinates of the container's left point are (0,0).

The first one, the background image and the upper left alignment, 0px 0px can also be written

Second, the background is in the middle of the container and the fixed-point coordinates are positive

Third, the background part is on the top left of the container and the fixed point coordinates are negative.

Here we may understand how to use the positioning values in the background to accurately locate a background image, go back to look at the beginning of the introduction of the two pictures, we can use: background positioning and the container is visible in the two properties to arbitrarily call the whole picture of a part.

But for the convenience of the call, in order to arrange these small pictures to pay attention to a little bit of rules, such as: the distance between the small picture is usually called the size of the container, or a larger distance, so you can avoid displaying in the container we do not want to display the picture!

To add, the algorithm is more special if the positioning is in percent. Let me give you an example:

Code:

Background: #FFF URL (image) no-repeat fixed 50%-30%;

This time the picture should be where the container, the algorithm formula is as follows:

The coordinate position of the left vertex of the picture from the left vertex of the container is

X: (Width of the container-width of the picture) x50%

Y: (Height of the container-height of the picture) x (-30%)

The resulting result applies the coordinate law, if the difference is negative, the percentage is positive and the result is negative. If the difference is negative and the percentage is negative, the result of the operation is a positive number. All in all, the operation here is in accordance with the algorithm. Take the result of the operation into the coordinate law to get the position of the picture.

For example: The container is width:600px;height:600px, and the picture is width:200px;height:200px;

We use the above style to get the picture position as:

x: (600px-200px) *50%

Y: (600px-200px) * (-30%)

Such as: