每次打开网站，总是熟悉的模样，看得久了就感觉 丑！！！于是今天突发奇想，给网站做了一个随机使用背景。焕然一新，感觉果然是舒服多了。
原理就是通过js代码来动态的生成一个代表图片路径的 字符串或者 html代码
首先在网上找一些喜欢的背景图片都放在image文件夹中.（分辨率别太小了，不是用来做头像的!:cat:）
其实直接用网上的图片链接也可以，只要能找到连接就行。
有了图片之后就可以做一个简单地 html网页，代码如下:
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
在
之间添加如下 js代码：
<script type="text/javascript">//产生随机背景图片 var bodyBgs = []; for (var i = 1; i < 19; i++) {//注意图片数量 bodyBgs[i] = "image/bg"+i+".jpg"; }; var randomBgIndex = Math.round( Math.random() * 18 );//随机获取字符串标识，注意图片数量 document.write('<style>.bg{width:100%;background:url('); document.write(bodyBgs[randomBgIndex]); document.write(');background-size: cover;}</style>'); //上面的三个字符串可以用“+”连接成一个字符串，这里因为位置原因我拆开写了。</script>
在 <body>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1019
