0

我正在使用 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 中定义的主体元素，但在这种情况下，BG 图像正在由 jQuery 加载。我将如何在此代码中添加淡入以使图像带有漂亮的淡入淡出效果？

4

3 回答 3

2

您可以将 body 设置background-color为black然后制作一个像 div 一样的元素，将其定位为fixed然后fade将其放置在应该填充浏览器视口的整个宽度和高度的元素中。

于 2012-07-01T21:17:20.883 回答
0

I would just create a container on top of the body at 100% width and height to fill the space available and if necessary specify a z-index to position it below other elements. Then set the background image of the container in CSS and set opacity: 0. Finally use jQuery's fadeTo() to transition to 100% opacity.

于 2012-07-01T21:15:37.967 回答
-1

With CSS3 transitions you could add a fade in to the background image. Therefore if you add the following property:

transition: background 0.5s;

To your body div, you could get a fade in for browsers that support it. However, this wouldn't be supported on browsers that do not support CSS3 transitions.

于 2012-07-01T21:10:18.890 回答