为何background-position百分比不生效，设置background-size后反向移动？

为什么background-position: 80%不生效？ #

默认情况下，background-size的取值是auto，对于线性渐变这类生成背景，auto意味着背景尺寸和元素容器的尺寸完全一致——渐变刚好填满整个元素，没有额外的“可移动空间”。

当你设置百分比类型的background-position时，它的作用是让背景的某个百分比位置和容器的对应百分比位置对齐。但如果背景和容器一样大，无论怎么设置百分比，背景都不会有视觉上的偏移，因为对齐点完全重合。

而像素单位是绝对偏移量，哪怕背景和容器尺寸一致，设置20px也会强制让背景相对于容器原点（左上角）偏移指定像素，所以能看到明显的移动效果。

你的初始代码示例：

<div>Hello</div>

div {
    background-image: linear-gradient(120deg, red 0%, red 50%, green 50%);
    background-position : 80%;
}

为什么添加background-size:200%后，background-position:80%会让背景向左移动？ #

这是因为百分比类型的background-position的计算逻辑是：

偏移量 = (容器尺寸 - 背景尺寸) * 百分比值

当你设置background-size:200%，背景宽度变成了容器宽度的2倍。代入水平方向的计算：

水平偏移量 = (容器宽度 - 2*容器宽度) * 80% = -容器宽度 * 80%

负的偏移量代表背景向左移动（正偏移是向右），所以你会看到背景往左侧偏移了。如果想让背景向右移动，你可以设置更小的百分比值，比如20%，此时计算出的偏移量是正的，背景就会向右移动。

调整后的代码示例：

<div>Hello</div>

div {
    background-image: linear-gradient(120deg, red 0%, red 50%, green 50%);
    background-position : 80%;
    background-size: 200%
}

内容的提问来源于stack exchange，提问作者radman