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

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?

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.