教你免费打造一款类似阮一峰网站背景图动态更换的网页

HTML5 herman 620浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

经常访问阮一峰网站的人都知道,他网站的主页的背景图经常变,每刷新一下都不一样。这是怎么实现的呢?如果我网站上存储这么多照片,那需要多大的存储空间啊。显然阮老师的网站上不可能存储这么多照片的。那么该如何模仿阮老师的网站实现动态刷新网站背景图呢?而且每次还不一样。

其实实现起来很简单,我们只需要找一个提供大量图片的网站即可。

最近我在无意之间发现了 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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 教你免费打造一款类似阮一峰网站背景图动态更换的网页