欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

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

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

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

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

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

最近我在无意之间发现了 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工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/21359.html
相关前端设计
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.