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";

背景图片随机切换

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

威言威语

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

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

php如何把图片铺满,PHP如何裁剪图片成固定大小
做一个首页调用图像,有时需要获得固定大小的图像,因为首页的图像位置通常由设计人员指定好了,如果是做最新发布图像调用,因为不知道客户会上传什么比例的图像,所以,有时候也就没有办法确定图像的比例,前台页面 ...
html背景图片不重叠铺满,html中背景图片铺满页面没有重复的效果
刚开始设置背景图片的时候,能铺满页面,但是没有全部把页面展现出来,经过一番查资料,才搞明白.如下: background: url(../../../assets/login/login-backgr ...
background背景图片铺满背景并且不重复
background-repeat: no-repeat; 不重复 background-size:cover; 背景铺满元素调整背景图片的宽度或高度(较小者),以铺满整个元素
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一.DIV中添加背景图片二.img中设置背景图片三.Body中设置背景图片结语针对页面背景图片我整理了几种 ...
Android 使用图片铺满某个区域
/*** 使用图片铺满某个区域,返回整个铺满的图片* @param src 原图片* @param rect 要铺满的区域大小*/public static Bitmap getTile(Bitmap ...
小程序、h5图片铺满div，自适应容器大小
图片铺满div,自适应容器大小,不会拉伸变形小程序 mode属性 scaleToFill:缩放模式,不保持纵横比,图片拉伸至填满 image 元素 aspectFit: 缩放模式,保持纵横比,保证图 ...
在VB中如何让背景图片铺满整个MDIForm
在VB中,如何让背景图片铺满整个Form,代码如下: '* ************************************************************** * '* ...
web图片铺满网页_css怎么让图片铺满？
css让图片铺满的方法:可以使用background-size:cover样式设置背景图片铺满.background-size属性规定背景图像的尺寸. background-size 属性: back ...
php如何把图片铺满,用Dreamweaver8设计网页，怎样使背景图片铺满全屏？
楼主说的是要背景图片只出现一次,而且是铺满全屏的吧!这是不可能的,背景图片是不能用代码控制它的大小的,它是多大,做背景的时候就只能是多大!最多是重复N个图片我们在网页制作过程中,尤其是初学的人们读喜 ...

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

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

最新文章

热门文章