如果不指定背景大小,在本例中为" 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>
我希望看到一个没有指定背景大小的动画。我还希望使用背景大小,而不必将其设置为重要。
发布于 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%
https://stackoverflow.com/questions/56692112
复制相似问题