1

所以这些天我放弃了 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/

4

2 回答 2

1

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

当您将 0 设置为您正在谈论的顶部或左侧的位置值时...... 0 0 是左上角。

检查这个小提琴

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 中为我工作，让我知道它是否适合你。干杯。

于 2013-07-24T12:41:04.423 回答
0

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

页面底部的粘性页脚和正文背景图像

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

于 2013-07-24T12:35:05.020 回答