Bootstrap按钮切换正文的背景图像

Question

我想切换背景图像与自举按钮。

我在三网融合

body { 
    background-image: url('img/myimage_1.gif'); 
} 

在HTML

...

<button type="button" id="bkgchange" class="btn" data-toggle="button">Change the background</button> 

和脚本...

$('bkgchange').click(function() { 
    $(#body).css('background-image', '~/img/myimage_2.gif'); 
}); 

而且它不工作？任何指针。我知道这是非常规的想要混乱的身体属性，我不能把图像作为div背景或在一个容器中，因为它不表现自己...

作为直接解决方案的欢迎替代品。

Answer 1

试试这个

$('#bkgchange').click(function() { 
    $('body').css('background-image', 'url(/img/myimage_2.gif)'); 
}); 

bkgchange是你的按钮的id，所以如果你想通过jQuery来访问它，你需要在它之前放置#。像$('#bkgchange')，并且您想从页面访问body元素，因此您需要通过$('body')而不是$(#body)访问它。

放置background-image，模式，因为这是url(path-of-image)，你不能使用~/与网址为CSS不知道这件事情，它应该指的根目录下，你可以用/尝试参照根目录。

Answer 2

$('#bkgchange').click(function() { 
    $('body').css('background-image', 'url(http://terangatimes.com/wp-content/uploads/2013/02/html-pointing-sign-clipart.jpg)'); 
}); 

http://jsfiddle.net/B72sv/

你缺少#通过ID来获得你的bkgchange按钮。而你的body不需要#你没有通过id选择它。

此外，你错过了你的css的url(，并确保你的图像的url是完整的路径。

$('bkgchange').click(function() { $(#body).css('background-image', '~/img/myimage_2.gif'); });