Question

我想更改我构建ChangeBg函数的背景图片，以便褪色。

为什么这不起作用？我做错了什么？

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"type="text/javascript"></script>
<script language="JavaScript">
    function changeBg (color) {
        document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-  repeat";
        $("changeBg").fadeIn("slow"); }
</script>

Answer 1

我假设您错过了#：

 $("#changeBg").fadeIn("slow");

如果changeBg是html元素的ID。

document.getElementById // <-- knows it's an ID
$() // <- can select classes, tags, :first's, :contain's, etc, etc

所以jQuery使用＃标签来指定ID。

Answer 2

一些事情一目了然：

图片的url路径是否相对于页面？换句话说，url(Images应该是url(/Images吗？

我假设您的代码中no- repeat实际上没有空格？我认为浏览器不会自动清理它。

最后（但也许是最重要的），你必须修复你的选择器：如果$("changeBg")是元素id属性，$("#changeBg")应该是changeBg。

Answer 3

这里changebg是什么？你不是说$('#wrapper').fadeIn();吗？

Answer 4

尝试使用jquery或javascript。不要混淆

function changeBg (color) {
        $("#wrapper").css("background","url(Images/"+color+".jpg) no-repeat");
        $("#wrapper").fadeIn("slow"); 
}

Answer 5

以下是使用背景图片淡化元素的示例：http://jsfiddle.net/jasper/XeKLw/

HTML：

<div></div>

CSS：

div {
    width  : 300px;
    height : 300px;
    background : url(...) center center;
    display : none;
}

JS：

$(document).on('click', function () {
    $('div').fadeToggle();
});

注意：.on()是jQuery 1.7中的新功能，在这种情况下会替换.bind()。

使用fadeIn（）淡化背景图像

5 个答案: