css - 关于background-position百分比的问题？

Question

dome在这 https://jsfiddle.net/d1LpL9eu/

background-position: calc(100% - 40px) calc(100% - 20px);

background-position前两个值应该是
水平和垂直位置，分别是从左边和上边开始计算的，
为什么calc(100% - 40px)是从右侧开始计算的？
calc中的100%指的是图片还是容器呢？

Answer 1

calc(100% - 40px)
Align the right side of the background image with the right inner border of the container, and then move it 40 pixels to the right
calc(100% - 20px);
Align the bottom edge of the background image with the lower inner border of the container Align, then move up another 20 pixels

Background-position is valid for both the container and the background when using percentages. The horizontal direction is calculated from the left and the vertical direction is calculated from the top.
That is, background-position:50% 50% will take 50% of the horizontal direction of the container. Align the position with 50% of the background image, and at the same time align the 50% position in the vertical direction with the 50% position of the background image. The effect is that the background image is placed in the middle of the container

Answer 2

1,

.box {
    background-position: calc(100%) calc(100%);
}

Calculated, it’s in the lower right corner, so it’s clear at a glance~ The rest will be fine~

2. The 100% in calc here refers to

.box {
    background-position: calc(x) calc(y);
}

Do you know?

Answer 3

Calc is the abbreviation of the English word calculate. It is a new function of CSS3, which is used to specify the length of the element (obtaining the result value through calculation). And x direction: calc(100% - 40px) means the total width - 40px, of which 100% is the total width (total height) of the container.