0

我知道这个问题之前已经提出过,但从未解决。

有谁知道你是否可以在 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')}
}
4

1 回答 1

0

使用边框属性。图片需要很长时间才能加载,所以使用边框请参阅此
jsfiddle.net/EucZM/

于 2013-02-19T05:52:46.057 回答