将背景图像添加到jquery中的按钮

Question

我想添加图像到按钮，一旦点击使用jquery.I无法添加图像。

这里是jQuery代码

$('#b2').click(function(){ 
alert("b2 am called"); 
$(this).addClass("bg1"); 
}); 

下面是CSS

.bg1 
{ 
background-image: url(info.jpg); 
background-repeat: no-repeat; 
border: none;  
} 

input#b2 
{ 
position:absolute; 
left:370px; 
top:130px; 
width:90px; /*same as the height*/ 
height:90px; 
} 

这里是HTML代码

<div id="level_1"class="Level1"> 
<input type="button" id="b2" value="" name="b2" > 
</div> 

这里是：JS Fiddle

Answer 1

我想你可能为m在你的工作示例中发布jQuery库。我得到了它在这里工作：使用

$('#b2').click(function(){ 
    alert("b2 am called"); 
    $(this).addClass("bg1"); 
}); 

和

JSFIDDLE

input.bg1 
{ 
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg'); 
} 

完整的解决方案：

<style> 
    input#b2 
{ 
position:absolute; 
left:370px; 
top:130px; 
width:90px; /*same as the height*/ 
height:90px; 
background:#fff; 
} 

input.bg1 
{ 
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg') !important; 
} 
</style> 

<div id="level_1"class="Level1"> 
    <input type="button" id="b2" value="" name="b2" /> 
</div> 

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script> 
    var $ = jQuery 
    $('#b2').click(function(){ 
     alert("b2 am called"); 
     $(this).addClass("bg1"); 
    }); 
</script> 

Answer 2

这似乎有些修改后的打算工作：

http://jsfiddle.net/dtq38yvz/7/

<div id="level_1" class="Level1"> 
    <input type="button" id="b2" value="" name="b2"> 
</div> 

$('#b2').click(function(){ 
    $(this).addClass("bg1"); 
}); 

#b2 
{ 
    position:absolute; 
    left:370px; 
    top:130px; 
    width:90px; /*same as the height*/ 
    height:90px; 
    background-color:#fff; 
} 

.bg1 
{ 
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg') no-repeat center center; 
}