网站百科

为您解码网站建设的点点滴滴

首页 > > 网站建设知识 > 建站知识 > 前端设计

企业建站知识推广知识小程序微信营销 APP开发前端设计 MindManager 开发语言自媒体

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

发表日期：2019-09 文章编辑：小灯浏览次数：4352

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

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

最近我在无意之间发现了 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>

看吧，很简单吧。世上无难事，只怕有心人！

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/21359.html

上一篇：<微信小程序 wx:if wx:elif wx:else 多条件判断下一篇：免费的 Web 视频播放器 Projekktor>