Question

我正在使用jQuery加载填充页面宽度/高度的背景图像。我在头部有以下内容：

$(document).ready(function() {
    $('body').css({
    'background-image' : 'url({HTML_BASE}images/backgrounds/randoms/{BACK_IMG})',
        'background-repeat' : 'no-repeat',
        'background-position' : 'center top',
        'background-attachment': 'fixed',
        'background-size': '100% 100%',
    });
    $('#home-promo').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: 'auto'
    });

    $('.model-search').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: '393'
    });

});

这很好，可以在http://projects.snowshtechnologies.com/golden_dragon/home/

看到

我希望BG图像从黑色背景颜色淡入。我已经查看了Stack上的一些其他线程，这些线程表明它不可能作为css中定义的body元素，但在这种情况下，BG图像正由jQuery加载。我将如何添加淡入淡出代码以使图像具有漂亮的淡入淡出效果？

Answer 1

你可以将正文background-color设置为black，然后创建一个像div一样的元素，将其定位为fixed，然后将fade置于该元素中填充浏览器视口的整个宽度和高度。

Answer 2

我只是在100％宽度和高度的身体顶部创建一个容器来填充可用空间，如果需要，指定z-index将其放置在其他元素下方。然后在CSS中设置容器的背景图像并设置opacity: 0。最后使用jQuery的fadeTo()转换为100％不透明度。

Answer 3

使用CSS3过渡，您可以为背景图像添加淡入淡出。因此，如果添加以下属性：

transition: background 0.5s;

对于您的身体div，您可以获得支持它的浏览器的淡入淡出。但是，不支持CSS3过渡的浏览器不支持此功能。

jquery背景图像淡出

3 个答案: