为什么必须设置背景大小才能使这种变化的线性渐变生效
为什么必须设置背景大小才能使这种变化的线性渐变生效
提问于 2019-06-21 02:42:38
如果不指定背景大小，在本例中为" background-size : 370%370%；“，则更改的线性渐变动画不起作用。
由于某些原因，背景大小也只有在声明为重要时才起作用(例如:背景大小: 370% 370%！重要；)
我试着删除背景大小，但动画是不可见的。
.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>
我希望看到一个没有指定背景大小的动画。我还希望使用背景大小，而不必将其设置为重要。
回答 1
Stack Overflow用户
发布于 2019-06-21 03:05:24
您的background属性实际上会覆盖background-size属性，因为background属性包括所有其他背景属性，如颜色、大小、url ...etc，因此您需要将background-size属性置于background属性下以便覆盖它，或者仅在background属性上指定该属性，如下所示background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 0 0/370% 370%
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56692112
复制相关文章
相似问题