2010-01-27 57 views
1

所以,我试图在文档加载后更改两个输入字段的背景。我使用这个jQuery代码:使用css()方法帮助我

$(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做到这一点,但因为我想改变字段的背景后,各种事件发生)。

+1

你保持样式表,图片和页面,你在同一个显示夹? – roman 2010-01-27 22:44:28

+0

尝试使用双引号来包裹您的选择器和“背景”或“背景图像”。由于引号不匹配,jQuery可能在内部处理一些错误。由于您在url选项中使用单引号,因此您必须为jquery选项使用双引号。但是,url选项不需要引号,因此您可以删除这些单引号。 – 2010-01-27 22:47:06

+0

我认为单引号不是必需的,但推荐。我在大多数在线css教程中看到他们。 – 2010-01-28 21:42:58

回答

1

图像应该与页面位于同一路径。

3

我认为你需要使用

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图片的路径应该是而不是被引用。

1

我在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> 
+0

是的,我有一个错字:) – 2010-01-28 21:42:28

1
  1. 确保图片的路径是正确的
  2. 删除CSS url样式里面的单引号,即url(login-bg.gif)