使用JavaScript更改背景圖像

我有一個背景圖像被拉伸以適應整個屏幕。我正在嘗試編寫一個將背景更改爲另一個圖像的腳本。我當前的腳本不會將圖像拉伸以適應整個屏幕，而是將圖像居中。在Firefox，IE和Opera中會出現此問題。 Chrome和Safari似乎未受影響。我跟着this教程來創建整頁背景圖片。使用JavaScript更改背景圖像

CSS：

html { 
    background: url(../img/01.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

的JavaScript：

$('#previous').click(function() { 
    $('html').css('background', 'url(img/01.jpg) no-repeat center fixed'); 
}); 

$('#next').click(function() { 
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed'); 
});

來源

2012-05-07 Jon

不知道這是否會有所幫助，但是您是否曾嘗試將html標籤的高度和寬度設置爲100％？ – Chase

剛剛嘗試過，但沒有工作:( – Jon

如果嘗試直接在功能上說背景大小？

$('#next').click(function() { 
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed'); 
    $('html').css('background-size', 'cover'); 
});

因爲我想，當背景的變化，previouse背景-size屬性可能是不工作的新形象......

來源

2012-05-07 00:33:34 DaneSoul

美麗，工作。謝謝:) – Jon

試試這個，它爲我工作。

CSS

body { 
    background-image: url('img/bg2.jpg'); 
    color: #000305; 
    font-size: 87.5%; /* Base font size: 14px */ 
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    line-height: 1.429; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    } 

.body { 
    clear: both; 
    margin: 0 auto; 
    width: 70%; 
}

而在HTML中我用下面的腳本

$(document).ready(function() { 

$("#tb").click(function() { 
var body = document.getElementsByTagName('body')[0]; 
body.style.backgroundImage = 'url(img/p2.jpg)'; 

    }); 

});

其中TB是我用來更改背景圖片的按鈕。

來源

2013-12-28 08:25:04 Rusty

使用JavaScript更改背景圖像

回答

相關問題