全頁大小的背景圖像

我有我的HTML頁面的背景圖像。我設置它通過CSS樣式： -全頁大小的背景圖像

html{ 
    margin-top:10px; 
    background: url(xxxxx.jpg) no-repeat center center fixed; 
    background-size: cover; 
}

我想知道如何我可以動態地從Javascript端改變它。

我已經試過類似：

document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";

但這並不改變形象。

沒有使用jQuery，我怎麼能訪問HTML元素並改變其bkImage，說每5秒使它像幻燈片。（我會將我的圖像網址存儲在數組中）。

來源

2015-05-31 init

背景圖像是不是真的綁html標籤，但標籤body。嘗試：

body 
{ 
    background-image: url(xxxxx.jpg); 
}

和腳本：

document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";

如果按預期工作（你看zzzzz.jpg，不xxxxx.jpg），那麼你就可以修復的CSS代碼的其餘部分。

編輯：測試的代碼和固定的一個錯誤。您必須分配backgroundImage = "url('zzzzz.jpg')"，而不僅僅是我之前編寫的文件名。

作爲一個例子，這個完美的作品，所有你需要的是兩個圖像（red.jpg和blue.jpg）：

<html> 
    <head> 
    <style> 
     body 
     { 
     background-image: url('red.jpg'); 
     } 
    </style> 
    </head> 
    <body> 
    <script> 
     document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')"; 
    </script> 
    </body> 
</html>

編輯2：

的CSS的其餘部分不能改變，所以您仍然有：

body 
{ 
    margin-top: 10px; 
    background: url('xxxxx.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

background屬性是化合物：

background: url('xxxxx.jpg') no-repeat center center fixed; 
      ^   ^  ^ ^
       URL    R   H  V 

    URL: the image url 
    R: repetition 
    H: horizontal alignment 
    V: vertical alignment

隨着

background-image: url('xxxxx.jpg')

你只需要改變上述化合物的URL部分，留下其餘的，因爲它是。如果圖像太小，可能會拉伸以覆蓋整個屏幕。因此，對於一個好的幻燈片，請確保所有圖像具有相同的大小。

來源

2015-05-31 19:39:21 pid

所以我仍然使用的getElementsByTagName（「身體」） – init

這給了你很多因素不能改變的圖像，所以你必須選擇先用'[0]'。我剛剛測試了我的代碼，它完美地工作。 – pid

讓它工作...最簡單的錯誤： - 我有外部的js文件，忘了指向正確的。 – init

要訪問html元素，您可以使用document.documentElement：

document.documentElement.style.backgroundImage = "url('yyy.jpg')";

要改變它，你可以使用setInterval()每X秒，讓你的圖片在數組中。

來源

2015-05-31 19:44:52 Samurai

全頁大小的背景圖像

回答

相關問題