html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用

在皮肤『QQ Style』中我使用了随机背景切换功能，这个随机背景切换是一个独立的功能，上面使用的只是其中一小部分应用。下面我将演示背景随机切换的更多应用，然后大家就可以有更多的拓展。

第一：背景图片重复铺满屏幕并随着文字一起运动

背景图片随机切换(1)

bg = new Array(2);

bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'

bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'

bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'

var index = Math.floor(Math.random() * bg.length);

document.body.background = bg[index];

背景图片随机切换

刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

第二：背景图片重复铺满屏幕但不随着文字一起运动

背景图片随机切换(2)

bg = new Array(2);

bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'

bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'

bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'

var index = Math.floor(Math.random() * bg.length);

document.body.background = bg[index];

document.body.style.backgroundAttachment = "fixed";

背景图片随机切换

刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

第三：背景图片不重复并位于浏览器左边(局右可以自己推导)

方法一(图片随着文字一起运动)

背景图片随机切换(3.1)

bg = new Array(2);

bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'

bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'

bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'

var index = Math.floor(Math.random() * bg.length);

document.body.style.background = "url("+bg[index]+") no-repeat top left"

背景图片随机切换

刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

方法二(图片不随着文字一起运动)

背景图片随机切换(3.2)

bg = new Array(2);

bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'

bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'

bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'

var index = Math.floor(Math.random() * bg.length);

document.body.style.backgroundImage = "url("+bg[index]+")";

document.body.style.backgroundRepeat = "no-repeat";

document.body.style.backgroundAttachment = "fixed";

背景图片随机切换

刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

第四：背景图片不重复并位在浏览器居中顶部显示

背景图片随机切换(4)

bg = new Array(2);

bg[0] = '/blog/weiimg/article/change/weisaybg1.jpg'

bg[1] = '/blog/weiimg/article/change/weisaybg2.jpg'

bg[2] = '/blog/weiimg/article/change/weisaybg3.jpg'

var index = Math.floor(Math.random() * bg.length);

document.body.style.backgroundImage = "url("+bg[index]+")";

document.body.style.backgroundRepeat = "no-repeat";

document.body.style.backgroundAttachment = "fixed";

document.body.style.backgroundPositionX = "center";

背景图片随机切换

刷新一次换一个背景，由于可能受到网速原因，建议保存本地测试！

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

威言威语

当然还可以扩展，自己动手吧！