用于切换身体背景图像的引导按钮

Question

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

我在 css...

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' );
});

它不工作？！任何指针。我知道想要弄乱 body 属性是非常规的，我不能将图像作为 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 不需要# 你没有选择它。

您还缺少 css 上的 url(，并确保您的图片的 url 是完整路径。

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