Question

如果未指定背景尺寸，在这种情况下为“ background-size：370％370％;”，则更改线性渐变动画无效。

由于某些原因，背景大小也仅在声明为重要时才起作用（例如：背景大小：370％370％！important;）

我尝试删除背景尺寸，但是动画不可见。

.bg {
  height: 100vh;
  background-size: 370% 370% !important;
  animation: bggradient 30s ease-in-out infinite;
  background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62);
}

@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

<div class="bg"></div>

我希望看到没有指定背景尺寸的动画。我也希望使用背景大小，而不必将其设置为重要。

Answer 1

background-position（带有百分比）会将背景图像的n％与容器的n％对齐。

0%（等同于left）将使图像的左侧与容器的左侧对齐。
50%（等效于center）将使图像的中心与容器的中心对齐（图像将看起来完全居中）。
100%（等效于right）将使图像的右侧与容器的右侧对齐。

在大多数情况下，这很有意义，因为您可能希望图像的一部分可见（例如，如果将left属性的左侧与所需百分比对齐，例如100%会使他将图像完全放在容器右侧的外面。

linear-gradient没有固有尺寸，默认情况下是其容器的100％宽度和100％高度。这意味着background-position不管它是什么都不起作用（图像始终完全适合容器，左侧始终与左侧对齐，等等）。要使其实际移动，您需要使其大于容器。

您也可以使用长度（px）代替百分比的背景位置，但这可能不符合您的需求。

编辑：
我误解了部分问题，我的错。正如某人在评论中所说，之所以需要!important是因为background是所有背景属性的简写，并且将重置所有未指定的值。

使用background-image可以：

background-image: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62);

Answer 2

您的background属性实际上是覆盖background-size属性，因为background属性包括所有其他背景属性，例如color，size，url等，因此您需要使background-size属性下的background属性，因此它会覆盖它，或仅在background属性上指定，例如background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 0 0/370% 370%

为什么需要设置背景大小才能使此变化的线性渐变起作用

2 个答案: