Question

我知道之前已经提到过，但它从未得到解决。

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

Answer 1

使用border属性。图像需要花费很多时间才能加载，因此请使用边框看到这个 jsfiddle.net/EucZM /

在Firefox中交叉淡入淡出背景图像，CSS无法正常工作

1 个答案: