发表日期:2019-09 文章编辑:小灯 浏览次数:3381
经常访问阮一峰网站的人都知道,他网站的主页的背景图经常变,每刷新一下都不一样。这是怎么实现的呢?如果我网站上存储这么多照片,那需要多大的存储空间啊。显然阮老师的网站上不可能存储这么多照片的。那么该如何模仿阮老师的网站实现动态刷新网站背景图呢?而且每次还不一样。
其实实现起来很简单,我们只需要找一个提供大量图片的网站即可。
最近我在无意之间发现了 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>
看吧,很简单吧。世上无难事,只怕有心人!
日期:2019-09 浏览次数:6059
日期:2019-09 浏览次数:4080
日期:2019-09 浏览次数:4883
日期:2019-09 浏览次数:9879
日期:2019-09 浏览次数:10020
日期:2019-09 浏览次数:3866
日期:2019-09 浏览次数:3482
日期:2019-09 浏览次数:3244
日期:2019-09 浏览次数:2960
日期:2019-09 浏览次数:3381
日期:2019-09 浏览次数:6681
日期:2019-09 浏览次数:3093
日期:2019-09 浏览次数:3585
日期:2019-09 浏览次数:3217
日期:2019-09 浏览次数:3273
日期:2019-09 浏览次数:3525
日期:2019-09 浏览次数:5138
日期:2019-09 浏览次数:2832
日期:2019-09 浏览次数:3898
日期:2019-09 浏览次数:3323
日期:2019-09 浏览次数:3528
日期:2019-09 浏览次数:3544
日期:2019-09 浏览次数:3052
日期:2019-09 浏览次数:3836
日期:2019-09 浏览次数:4943
日期:2019-09 浏览次数:4775
日期:2019-09 浏览次数:2988
日期:2019-09 浏览次数:8332
日期:2019-09 浏览次数:4089
日期:2019-09 浏览次数:3327
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.