Question

为什么我的css转换不能在firefox中运行？我的意思是轻松进出？它适用于铬和野生动物园。我已经googel了，并在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>

也许有人可以在this Fiddle上改进它。

轻松进入不在Firefox中工作

1 个答案: