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;

Answer 2

将样式委托给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];
}

如果您想立即更改背景，而没有无格式内容，请在关闭setRandomTheme标记之前立即致电body：

<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(); 
});

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

2 个答案: