Firefox中的crossfade背景圖像與CSS不起作用

我知道這已被提出，但它從未解決。Firefox中的crossfade背景圖像與CSS不起作用

有誰知道如果你可以在Firefox中交叉淡入淡出背景圖片嗎？我知道你可以在chrome和explorer中做背景圖片動畫，但是它在FF中似乎沒有效果。它使用顏色而不是圖像。我不使用jQuery

這裏是我的網站：http://www.moniquepompe.com

這裏是我的代碼，請大家幫忙！：

body{ 
background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;} 
animation:myfirst 5s infinite; 
-moz-animation: myfirst 5s infinite; /* Firefox */ 
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */ 
-o-animation:myfirst 5s infinite; /* Opera */; 
-webkit-background-size: cover;} 


@keyframes myfirst 
{0% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-moz-keyframes myfirst /* Firefox */ 
{ 
0% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-o-keyframes myfirst /* Opera */ 
{ 
0% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
}

來源

2013-02-19 molly polenta

，我想出了一個臨時的解決方案，但它不是我所希望實現的。如果有解決我最初的問題，這仍然很好。謝謝。 – 2013-02-19 08:21:59

您是否找到解決方案？ – 2014-07-30 03:45:26

使用border屬性。圖像需要這麼多的時間來加載，所以使用邊界看到這個
jsfiddle.net/EucZM/

來源

2013-02-19 05:52:46

我想也許你回答了錯誤的問題？我的問題與邊界無關。 – 2013-02-19 06:11:49

我知道你在問背景圖片。它不適用於ff.SO我只是建議你請嘗試邊框。 – 2013-02-19 06:48:03

好，謝謝Pawan。在這種情況下邊界不適合我，但無論如何要感謝。 – 2013-02-19 07:19:09

Firefox中的crossfade背景圖像與CSS不起作用

回答

相關問題