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

Question

I'm using the following code to change the background image when the page is refreshed 我正在使用以下代码在刷新页面时更改背景图像

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;

Now I'm trying to make the CSS background-color change to the color of the image so that when the page is refreshed it doesn't flash white before it loads. 现在我正在尝试将CSS background-color更改为图像的颜色，以便在刷新页面时它在加载之前不会闪烁白色。

Website - http://lauramccartney.co.uk 网站 - http://lauramccartney.co.uk

Edit - I worked it out guys! 编辑 - 我把它们搞定了！ I used this 我用过这个

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;

Didn't make much of a difference so I also adjusted the background in the css to an inoffensive grey. 没有太大差别，所以我也把css中的背景调整为无用的灰色。

Answer 1

How about this : 这个怎么样：

Instead of just storing the img path, store it like color url('url-to-image') , and use that as the background while calling it. 而不是仅存储img路径，将其存储为color url('url-to-image') ，并在调用它时将其用作背景。

So your array would look like : ['color1 url(url-1)', 'color2 url(url-2)', ...] and change the javascript to use document.body.style.background = array[array-index]; 所以你的数组看起来像： ['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

It's always better to delegate styling to css classes, like this: 将样式委托给css类总是更好，如下所示：

theme.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);
}

apply-theme.js: 适用-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];
}

And if you want to change background instantly, without flash of unstyled content, call setRandomTheme right before closing body tag: 如果你想立即改变背景，没有无格式内容的闪光，请在关闭body标签之前调用setRandomTheme ：

<body>
    <p>La-la-la, some content</p>
    … skipped some code …
    <script type="text/javascript">setRandomTheme();</script>
</body>

Or from DOMContentLoaded event: 或者来自DOMContentLoaded事件：

just add this to apply-theme.js after setRandomTheme declaration: 只需在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