动画 HTML 背景图像淡入淡出

Animate HTML Background Image Fade

本文关键字：淡入 淡出 图像 背景 HTML 动画      更新时间：2023-09-26

我有一个网站，其中背景图像被拉伸以适应整个屏幕。有拇指指甲，单击将更改背景图像。我试图在背景图像发生变化时进行交叉淡入淡出过渡，但我似乎无法让它工作。

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

你试过使用后伸吗？

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

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

相关文章：