2013-10-18 85 views
2

我想切換背景圖像與自舉按鈕。Bootstrap按鈕切換正文的背景圖像

我在三網融合

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背景或在一個容器中,因爲它不表現自己...

作爲直接解決方案的歡迎替代品。

回答

0

試試這個

$('#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不知道這件事情,它應該指的根目錄下,你可以用/嘗試參照根目錄。

0
$('#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'); });

+0

@ gl2748請標明答案所接受,如果它回答了你的問題,否則給予什麼沒有解決的反饋。謝謝 – Trevor