轻松进入不在Firefox中工作

Question

为什么我的css转换不能在firefox中运行？ 我的意思是轻松进出？ 它适用于铬和野生动物园。 我有googel'd并在stackoverflow中做了研究，我真的，真的希望它不是因为firefox不支持这个???

CSS

body{
  background: url("../img/background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-y: hidden;
  -webkit-transition: background ease-in-out 0.5s;
  -moz-transition: background ease-in-out 0.5s;
  -o-transition: background ease-in-out 0.5s;
  transition: background ease-in-out 0.5s;
}

.background-0 {
  background: url("../img/ff.jpg") no-repeat center center fixed;
}
.background-1 {
  background: url("../img/ddd.jpg") no-repeat center center fixed;
}
.background-2 {
  background: url("../img/hh.jpg") no-repeat center center fixed;
}

.background-0,
.background-1,
.background-2{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

HTML

<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>

脚本

var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
    current_index = list_elements.index(this);
    $('body').addClass('background-' + current_index);

}).on('mouseleave', function(){
    $('body').removeClass('background-' + current_index);
    current_index = null;
});

Answer 1

也许你可以尝试动画背景位置，但背景位置会很难background-position: cover ：

 var list_elements = $('ul li'); var current_index = null; list_elements.on('mouseenter', function() { current_index = list_elements.index(this); $('body').addClass('background-' + current_index); }).on('mouseleave', function() { $('body').removeClass('background-' + current_index); current_index = null; }); 

 body { background: url("https://placehold.it/1250x550/000000") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; transition: all ease-in-out 0.5s; color: #fff; } .background-0 { background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; } .background-1 { background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; } .background-2 { background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/00ff00") no-repeat -2000px 50% fixed, url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> 

也许有人可以在这个小提琴上改进它。