Question

所以，我试图在文档加载后更改两个输入字段的背景。我使用这个jquery代码：

$(document).ready(function() {

    $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
    $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");

});

我看过Firebug中的代码，看起来还不错。但是，输入字段不会更改其背景。

如果我只是在样式表中设置它们的背景它是有效的（我想用jquery做它，因为我想在各种事件发生后改变字段的背景）。

Answer 1

我认为你需要使用

css("background-image", "url(login-bg.gif)");
css("background-position", "3em center");
css("background-repeat", "no-repeat");

或者更确切地说

css( { "background-image"    : "url(login-bg.gif)",
       "background-position" : "3em center", 
       "background-repeat"   : "no-repeat"
     }
);

docs page

上的第一句话

“不支持速记CSS属性（例如边距，背景，边框）。”

ALSO 图片的路径应不引用。

Answer 2

图片应与您的页面位于同一路径。

Answer 3

我在FF 3.5.7和IE 7中测试了下面的代码，它似乎工作。当然你已经检查了......但是在某处错字了？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Test</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" /></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
                $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");
            });
        </script>
    </head>

    <body style="font-family: Verdana; font-size: 0.8em; margin: 3em; background-color: #f1f1f1;">

    <div><input id="login" type="text" /></div>

    <br />

    <div><input id="password" type="text" /></div>

    </body>

</html>

Answer 4

确保图像路径正确
删除CSS url样式中的单引号，即url(login-bg.gif)

用css（）方法帮助我

4 个答案: