將背景顏色更改[css]鏈接到背景圖像更改[javascript]
[英]Linking background colour change [css] to background image change [javascript]
問題描述
我正在使用以下代碼在刷新頁面時更改背景圖像
function changeImg(imgNumber) {
var myImages = ["../img/background_tile.png", "../img/background_tile_blue.png", "../img/background_tile_green.png", "../img/background_tile_purple.png"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
現在我正在嘗試將CSS background-color更改為圖像的顏色，以便在刷新頁面時它在加載之前不會閃爍白色。
網站 - http://lauramccartney.co.uk
編輯 - 我把它們搞定了！ 我用過這個
function changeImg(imgNumber) {
var myImages = ["../img/background_tile.png", "../img/background_tile_blue.png", "../img/background_tile_green.png", "../img/background_tile_purple.png"];
var myColors = ["#d1261e", "#6167e6", "#3db322", "#a12cbb"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
document.body.style.backgroundColor = myColors[newImgNumber];
}
window.onload=changeImg;
沒有太大差別，所以我也把css中的背景調整為無用的灰色。
2 個解決方案
解決方案1
2 2012-11-08 13:40:02
這個怎么樣 ：
而不是僅存儲img路徑，將其存儲為color url('url-to-image') ，並在調用它時將其用作背景。
所以你的數組看起來像： ['color1 url(url-1)', 'color2 url(url-2)', ...]並更改javascript以使用document.body.style.background = array[array-index];
/*Makes background image change when refreshed*/
function changeImg(imgNumber) {
var myImages = ["red url(../img/background_tile.png)", "blue url(../img/background_tile_blue.png)", "green url(../img/background_tile_green.png)", "orange url(../img/background_tile_purple.png)"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.background = myImages[newImgNumber];
}
window.onload=changeImg;
解決方案2
1 2012-11-08 14:19:40
將樣式委托給css類總是更好，如下所示：
theme.css：
.theme-1 {
background:red url(../img/background_tile.png);
}
.theme-2 {
background:green url(../img/background_tile_green.png);
}
.theme-3 {
background:orange url(../img/background_tile_purple.png);
}
適用-theme.js：
/* Apply random class to body */
function setRandomTheme() {
var styles = ["theme-1", "theme-2", "theme-3"],
random = Math.floor(Math.random() * styles.length);
document.body.className += ' ' + styles[random];
}
如果你想立即改變背景，沒有無格式內容的閃光，請在關閉body標簽之前調用setRandomTheme ：
<body>
<p>La-la-la, some content</p>
… skipped some code …
<script type="text/javascript">setRandomTheme();</script>
</body>
或者來自DOMContentLoaded事件：
只需在setRandomTheme聲明后將其添加到apply-theme.js：
document.addEventListener('DOMContentLoaded', function () {
setRandomTheme();
});
Javascript，當顏色改變時改變css背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.