Question

我有一个网站，背景图片被拉伸以适应整个屏幕。点击的拇指指甲会改变背景图像。我正试图在背景图像发生变化时进行交叉淡入淡出过渡，但我似乎无法让它发挥作用。

现在，当点击缩略图时，整个屏幕（包括内容）淡出，然后用正确的背景图像淡入。我不希望内容淡出......我只是想让背景图像淡出。我认为我的问题是我告诉整个HTML页面淡出，但我不确定如何只定位整个网站的背景图片。

CSS

html {
    background: url(../img/01.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

的JavaScript

$("#wrapper #thumbs figure img").click(function() {
    var id = $(this).attr('id');        
    $('html').fadeOut("slow", function() { });
    $('html').fadeIn("slow", function() {
        $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed');
    }); 
});

Answer 1

您不应该为此定位HTML元素，而是使用多个div s，它们是正文的整个大小。然后，您可以根据需要指定z-index以获得适当的堆叠和交叉淡化两个元素。

我举了一个例子来说明这个jsFiddle。虽然这是一个快速推动自己背景淡化的例子，但如果Avinash能够适合您的使用案例，它的答案可能会更好。

Answer 2

您是否尝试过使用Backstretch？

动画HTML背景图像淡出

2 个答案: