1

我有一个网站，其中背景图像被拉伸以适合整个屏幕。有点击会改变背景图像的缩略图。我试图在背景图像发生变化时发生交叉淡入淡出过渡，但我似乎无法让它工作。

现在，当单击缩略图时，整个屏幕（包括内容）淡出，然后以正确的背景图像淡入。我不希望内容淡出...我只是想让背景图像淡出。我认为我的问题是我告诉整个 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');
    }); 
});
4

2 回答 2

1

您不应该为此定位 HTML 元素，而应使用多个divs 来表示正文的整个大小。然后，您可以根据需要指定z-index一次获得适当的堆叠和交叉淡入淡出两个元素。

我已经在这个jsFiddle中举了一个开始的例子。虽然这是一个快速滚动您自己的背景褪色方法的示例，但如果 Avinash 的答案适合您的用例，它可能会更好。

于 2012-05-07T04:14:02.690 回答
1

您是否尝试过使用Backstretch？

于 2012-05-07T04:22:44.693 回答