javascript - 将背景颜色更改 [css] 链接到背景图像更改 [javascript]

Question

我正在使用以下代码在刷新页面时更改背景图像

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 中的背景调整为无害的灰色。

Answer 1

这个怎么样:

不是只存储 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;