html中怎样定时变换背景图片_随笔

一般是用脚本实现。示例：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#bg_body{background:url(1.jpg) no-repeat center #eee background-attachment:fixed height:1000px}</style><script type="text/javascript">window.onload=function(){var oBody=document.getElementById('bg_body') var oS=oBody.style function BgChenge(){oS.backgroundImage='url(2.jpg)' } function BgPosition(){oS.backgroundRepeat='no-repeat' oS.backgroundPosition='center' oS.backgroundAttachment='fixed' } function LoadMethod(){BgChenge() BgPosition()} setInterval(LoadMethod,1000)}</script></head><body id="bg_body"></body></html>你背景图片就设置了一个2.jpg再切换也是这一张图片啊如果有多张图片比如说1-10.jpg，那就把oS.backgroundImage='url(2.jpg)'改为oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)'

方法一：在html文件中设置

html的中有两个关于背景的属性，其中的background用来设置背景图片。示例如下：

如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。

为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。

可以参考这个网站的教程和示例：

http://www.blabla.cn/html_tutorials/045_html_bgcolor_background.html

方法二：在css文件中设置

css的背景图片属性

示例：

可以参考这个网站的教程和示例：

http://www.blabla.cn/css_tutorials/020_css_background.html

参考资料：

http://www.blabla.cn/html_tutorials/index.html

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7562664.html

html中怎样定时变换背景图片

发表评论

评论列表（0条）