Question

我正在尝试使用引导按钮切换背景图像。

我有css ...

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

in 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)，并且您不能将~/与url一起使用，因为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(，并确保您的图片网址是完整路径。

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

Bootstrap按钮切换身体的背景图像

2 个答案: