公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
经常访问阮一峰网站的人都知道，他网站的主页的背景图经常变，每刷新一下都不一样。这是怎么实现的呢？如果我网站上存储这么多照片，那需要多大的存储空间啊。显然阮老师的网站上不可能存储这么多照片的。那么该如何模仿阮老师的网站实现动态刷新网站背景图呢？而且每次还不一样。
其实实现起来很简单，我们只需要找一个提供大量图片的网站即可。
最近我在无意之间发现了 https://picsum.photos/ 这个网站，它提供了很多免费的图片，而且这些图片可以根据你的需要获取指定大小的图片。还可以让你每次获取的图片都不一样。结合 https://picsum.photos/ 提供的 api，再配合上简单的 css 代码即可实现这一功能。一下是一个简单的 demo 实现代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>业余草：www.xttblog.com</title>
<style type="text/css">
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(https://picsum.photos/400/600/?random);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>
看吧，很简单吧。世上无难事，只怕有心人！
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 教你免费打造一款类似阮一峰网站背景图动态更换的网页