Question

Hello stackflow的向导！我今天刚刚开始使用JQuery而且我被卡住了。我需要背景图像来淡化onload。你可以忽略basepath函数它就是我使用的东西，所以我不需要输入图像的完整路径。

无论如何它根本不工作根本不加载或改变背景。奇怪的是，我在firefox firebug / web开发人员中没有出现任何错误。现在很快失去了JQuery。

var bodyElement = document.getElementsByTagName("body");
var backgroundSource = $(bodyElement[0]).css("backgroundImage");
var parentDirectory = basepath(backgroundSource);
var IMG = parentDirectory + "/jurasic_bg.jpg";




window.onload = function(){fadeBG();};





function basepath(elementObject){
var elementObject = elementObject.replace(/^url|[\(\)"]/g, '');
var elementPathArray = elementObject.split("/");
var elementPathArrayLength = elementPathArray.length - 1;

for (var counter = 0; counter < elementPathArrayLength; counter++)
    {
        if (counter == 0)
        {
            pathBuilder = elementPathArray[counter];
        }

        else

        var pathBuilder = pathBuilder + "/" + elementPathArray[counter];

    }

        return pathBuilder;
}


function fadeBG(){
    $('body').fadeIn('slow', function()
        {
        $(this).css('background-image', 'url(', IMG,')');
        });
        }

Answer 1

我不相信你可以将元素的背景与其内容分开淡化。

你可以创建一个单独的元素来保存背景并淡化它，如This question

中所示

或者你可以将背景变成渐弱的.gif文件。

Answer 2

据我所知，你无法为身体的背景图像制作动画。

你可以做的是制作占据整个窗口的两个div。我不认为早期版本的IE支持CSS（cover）这样做，但这是你可以做的。

<div class='bg none'></div>
<div class='bg one'></div>

div.bg{
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
}

div.one{
    background-image: url('path');
    display: none;
}

你提到了jQuery所以这就是它的工作方式：你需要使用document ready事件来触发你的动画。您可能需要delay这么长时间才能获得理想的效果，但这应该让您朝着正确的方向前进。哦，不要忘记在你自己的脚本之前在你的HTML中包含jQuery库。

$(document).ready(function(){
    $('div.one').fadeIn();
    $('div.none').fadeOut();
});

Javascript / JQuery背景图片淡入淡出

2 个答案: