Principle of background-position percentage, background-position

Principle of background-position percentage, background-position

When you call code for others today, you can see a style:

background-position: 50% 0;
background-size: 100% auto；

For background-size: 100% auto, the width of the background image is * 100% X, and the height is scaled proportionally. For details, see css3 background.

The percentage of the background-position is calculated based on the width of the parent element, but the background-position is really not. It has its own principle. The following is a detailed description.

I. Equivalent writing

The following statements are equivalent to the following:

• Top left and left top are equivalent to 0% 0%.
• Top, top center, and center top are equivalent to 50% 0%.
• Right top. top right is equivalent to 100% 0%.
• Left, left center, center left is equivalent to 0% 50%.
• Center, center is equivalent to 50% 50%.
• Right, right center, center right is equivalent to 100% 50%.
• Bottom left, left bottom is equivalent to 0% 100%.
• Bottom, bottom center, center bottom is equivalent to 50% 100%.
• Bottom right, right bottom is equivalent to 100% 100%.

So why is left, top equivalent to 0% 0%, right bottom equivalent to 100% 100%?

Ii. formula for calculating the percentage of background-position

Background-postion: x y; x: {width of the container (container)-width of the background image} * x percentage. The excess part is hidden. Y: {container (container) height-Background Image Height} * y percentage. The excess part is hidden.

With this formula, it is easy to understand the hundred percent writing method, and it is easy to understand the above equivalent writing method.

Iii. Example

1. background-position: center is equivalent to background-position: 50% 50% and is equivalent to background-position :? Px? Px

In this example, the background image [size: 200px * 200px] is used ]:

The background image is centered in the container.

<style type="text/css">.wrap{    width: 300px;    height: 300px;    border:1px solid green;    background-image: url(img/image.png);    background-repeat: no-repeat;/*    background-position: 50% 50%;*/    background-position: center center;}</style><div class="wrap"></div>

The effect is to center the background image.

As shown above, you can center the background image by setting percentages and keywords. If you want to center the image by setting specific values, how much can you set?

According to the above formula:

X = (container width-background image width) * x percentage = (300px-200px) * 50% = 50px;

Y = (container height-Background Image Height) * y percentage = (300px-200px) * 50% = 50px;

That is, Set background-postion: 50px 50px;

Test:

<style type="text/css">.wrap{    width: 300px;    height: 300px;    border:1px solid green;    background-image: url(img/image.png);    background-repeat: no-repeat;/*    background-position: 50% 50%;*//*    background-position: center center;*/    background-position: 50px 50px;}</style><div class="wrap"></div>

The effect is equally centered.