时间戳

首页 > 解决方案 > 为什么需要设置背景大小才能使这种不断变化的线性渐变起作用

html - 为什么需要设置背景大小才能使这种不断变化的线性渐变起作用

问题描述

如果不指定背景大小，在本例中为“背景大小：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>

我希望在不指定背景大小的情况下看到动画。我也希望使用背景大小而不必将其设置为重要。

标签： htmlcss

解决方案

您的background属性实际上正在覆盖该background-size属性，因为该background属性包括所有其他背景属性，例如 color 、 size 、 url ...等，因此您需要将您的background-size属性置于属性下background以便覆盖它，或者只在background属性上指定它这样background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 0 0/370% 370%

推荐阅读