css3 - 带CSS3动画的Twitter Bootstrap body background

  显示原文与译文双语对照的内容
0 0

所以我现在就放弃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/

时间:原作者:5个回答

0 0

感谢你加入小提琴。 我摆弄着它,让 background 把自己放在底部。

当你将 0设置为正讨论的位置值或者左侧时。 0 0的左上角。

检查这 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; }
}

这对我来说是在 Chrome 上工作的,让我知道如果它是你的。 干杯。

原作者:
0 0

你应该设置 background 动画 inside div 并检查:

在页面底部的 Sticky和正文 background 图像。

有一些答案可以帮助你

原作者:
...