Как работает вычисление CSS для фоновых процентов?

Процентное значение для background-position не позиционирует исходную точку фонового изображения относительно области позиционирования фона. Он позиционирует все изображение. Это означает, что размеры самого изображения также учитываются (после изменения его размера с помощью background-size).

Позиция фона 100% 100% аналогична right bottom, располагая изображение таким образом, что правый нижний угол изображения касается нижнего правого угла области фона. Точно так же 50% 50% аналогичен center center, помещая среднюю точку изображения в среднюю точку фоновой области.

Представьте, что прямоугольная плитка перемещается внутри прямоугольной рамки; перемещение его полностью вправо (т. е. на 100 %) означает, что его правый край касается правой стороны кадра (поскольку вы не можете провести его сквозь кадр), а перемещение его в нижний означает, что его нижний край касается нижней части кадра.

Вообще говоря, для любого background-position: x y, где два значения представляют собой проценты, точка x изображения выравнивается с точкой x области фона, а точка y изображения выравнивается с точкой y области фона.

Описание CSS2.1 читать больно поэтому вместо этого я процитирую Фон и границы CSS3, где есть даже графический пример:

Например, при паре значений «0% 0%» верхний левый угол изображения выравнивается с верхним левым углом, как правило, края заполнения блока. Пара значений «100% 100%» помещает правый нижний угол изображения в правый нижний угол области. С парой значений «75% 50%» точка 75% по ширине и 50% вниз по изображению должна быть размещена в точке 75% по ширине и 50% по площади.

Но если вы похожи на меня и плохо представляете это в реальном времени, тогда просто подумайте о скользящей головоломке.

Обратите внимание, что ничего из этого не относится к абсолютным значениям; абсолютные значения позиционируют исходную точку изображения. Однако опорную точку можно изменить, если вы привяжете абсолютное значение к правой и/или нижней сторонам, например, right 10px bottom 10px расположит фоновое изображение на расстоянии 10 пикселей от правого нижнего угла области фона.

Если вы хотите расположить фоновое изображение, размер которого составляет 100% области фона, вы не сможете использовать процент, так как вы не можете переместить плитку, которая идеально подходит к ее рамке (что, кстати, сделало бы либо для самая скучная головоломка или идеальный розыгрыш). Это применимо независимо от того, соответствуют ли внутренние размеры фонового изображения размерам элемента или вы явно установили background-size: 100%. Таким образом, чтобы расположить изображение, вам нужно будет использовать вместо этого абсолютное значение (полностью отказываясь от аналогии со скользящей головоломкой).

Как сказал Вудроу, из-за вашего правила размера фона, которое будет применяться для каждого фона, каждый фон будет занимать треть вашего флага, поэтому 0% будет отправной точкой для первого фона.

Второй снова возьмет третий, но чтобы было проще понять, подумайте, что 50% - это центр, а не 50%, поэтому он находится посередине и занимает треть контейнера. Вы можете использовать центр вместо 50%, если хотите.

Вот документ Mozilla о background-position

Свойство background-position задает положение центра фона. Вы указали, что все фоны имеют ширину calc(100%/3) и высоту 100%, затем вы указали положение x для центра каждого из трех фонов (положение y по умолчанию равно 50%).