Twitter Bootstrap身體背景與CSS3動畫

所以我現在扔進CSS3動畫，所以我現在正在玩它。但不幸的是，我在將bg圖片放在底部時遇到了一個問題。Twitter Bootstrap身體背景與CSS3動畫

這是代碼我工作：

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/

來源

2013-07-24 neknek mouh

爲什麼不把jsfiddle放在一起幫助我們更快地幫助你？ – sulfureous

加了一個，請檢查。 –

相關問題：http://stackoverflow.com/questions/5383438/keeping-background-image-at-bottom –

感謝增加小提琴。我擺弄它，並有背景將自己定位在底部。

當您將位置值設置爲0時，您正在討論Top或Left ... 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; } 
}

它的工作對我來說在Chrome上的PC，讓我知道它是否適合你。乾杯。

來源

2013-07-24 12:41:04 sulfureous

謝謝！它現在正在工作:)上帝保佑 –

你應該設置你的背景動畫裏面div和檢查：

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

有一些答案，可以幫助你

來源

2013-07-24 12:35:05 olamarche

Twitter Bootstrap身體背景與CSS3動畫

回答

相關問題