我正在使用以下代码在刷新页面时更改背景图像
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 中的背景调整为无害的灰色。
最佳答案
这个怎么样:
不是只存储 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;
关于javascript - 将背景颜色更改 [css] 链接到背景图像更改 [javascript],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13289938/