Question

所以我最近发现了CSS3真正令人兴奋的动画功能，并将动画应用到我的网站背景中：

我的问题是动画仅适用于加载时在浏览器窗口中可见的页面部分。如果你转到上面的链接并向下滚动，你会看到我的意思，背景图片在网站的顶部动画，但不是当你向下滚动页面...

有没有人知道解决这个问题的方法，以便bg动画适用于整个页面？

以下是我的CSS代码的相关部分：

body
{
background-image:url('images/patterntest2.jpg');
background-repeat:repeat;
-webkit-animation:bgscroll 20s infinite linear;
   -moz-animation:bgscroll 20s infinite linear;
    -ms-animation:bgscroll 20s infinite linear;
     -o-animation:bgscroll 20s infinite linear;
        animation:bgscroll 20s infinite linear;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*   Animations
-------------------------------------------------- 
////////////////////////////////////////////////*/

@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-moz-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-ms-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-o-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

Answer 1

使用Chrome，它也适用于我。但如果您遇到问题，我想您可以尝试设置

background-size: cover;

也许这会解决你的问题。

CSS动画背景不适用于整个页面

1 个答案: