为什么带有百分比值的background-position不会移动背景？

Question

我有一个背景图像设置为渐变的元素，并且

background-position: 80%;

但背景位置根本不移动渐变。

<div>Hello</div>

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

但是，如果我将值更改为像素单位数，例如 20px，它会将背景向右侧移动 20 个像素。我想知道为什么百分比值不起作用？

背景大小解决了这个问题：

<div>Hello</div>

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

但这给我带来了另一个问题，为什么它会将背景移至左侧？我预计它会将其向右移动，因为该值为正数。

Answer 1

CSS 中的

background-position

 属性用于指定背景图像的初始位置。当您使用百分比值时，它是相对于容器的大小和背景图像的大小。

在第一个示例中，

background-position: 80%;

似乎没有移动渐变，因为渐变的大小正是容器的大小。创建渐变以适合容器，因此将其移动 80% 不会改变其外观，因为它本质上是在自身内部移动。

当您添加

background-size: 200%

 时，渐变的宽度是容器的两倍。现在，当您设置 

background-position: 80%;

 时，它会产生效果，因为渐变大于容器。渐变会移动，但它可能看起来向左移动，因为您实际上是将图像的起点向右移动，从而显示了图像左侧的更多部分。

这是一种可视化的简化方法：

将渐变想象成一条长纸条，宽度是盒子（容器）的两倍。
• background-position

  是将盒子的左边缘与纸条对齐的地方。

如果
• background-position

   为 

  0%

  ，左边缘对齐，您会在框中看到纸张的左半部分。

如果
• background-position

   是 

  80%

  ，则将框的左边缘与纸张右端附近的点对齐。因此，您会在框中看到纸张的右侧部分，这使得纸张（渐变）看起来已移至左侧。