将背景颜色更改[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;

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];
}

如果你想立即改变背景，没有无格式内容的闪光，请在关闭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(); 
});

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

问题描述

2 个解决方案

解决方案1
2 2012-11-08 13:40:02

解决方案2
1 2012-11-08 14:19:40

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

问题描述

2 个解决方案

解决方案1 2 2012-11-08 13:40:02

解决方案2 1 2012-11-08 14:19:40

解决方案1
2 2012-11-08 13:40:02

解决方案2
1 2012-11-08 14:19:40