Question

所以我最近投入了CSS3动画，所以我现在正在玩它。但遗憾的是，我将bg图像定位到底部存在问题。

这是我正在处理的代码：

  body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background: #A9D0F5 url("../image/bg-clouds.png") repeat-x fixed center bottom;
  animation: animatedBackground 40s linear infinite;
  -ms-animation: animatedBackground 40s linear infinite;
  -moz-animation: animatedBackground 40s linear infinite;
  -webkit-animation: animatedBackground 40s linear infinite;
  /*background-color: #008bcf;*/    
}

@-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-webkit-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-ms-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-moz-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }

这里似乎有什么问题？有任何想法吗？感谢。

这是jsfiddle：http://jsfiddle.net/Rex2E/

Answer 1

感谢您添加小提琴。我摆弄它并得到了背景，将自己定位在底部。

当您将0设置为您正在谈论的上方或左方的位置值时... 0 0位于左上角。

Check this fiddle

body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333333;
   background: #A9D0F5 url("http://i43.tinypic.com/fcmjv4.png") repeat-x fixed center bottom;
   animation: animatedBackground 40s linear infinite;
   -ms-animation: animatedBackground 40s linear infinite;
   -moz-animation: animatedBackground 40s linear infinite;
   -webkit-animation: animatedBackground 40s linear infinite;
}
@-keyframes animatedBackground {
  from { background-position: center bottom; }
  to { background-position: 100% bottom; }
}
@-webkit-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}
@-ms-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}

它适用于PC上的Chrome，让我知道它是否适合您。欢呼声。

Answer 2

您应该在div内设置背景动画并检查：

Sticky footer and body background image at the bottom of the page

有一些答案可能对您有帮助

Twitter Bootstrap身体背景与CSS3动画

2 个答案: