歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司！
余先生：13699882642
余先生：13699882642
8年
專(zhuān)注網(wǎng)站建設(shè)行業(yè)優(yōu)質(zhì)服務(wù)商
余先生：13699882642
為您解碼網(wǎng)站建設(shè)的點(diǎn)點(diǎn)滴滴
發(fā)表日期：2019-09 文章編輯：小燈 瀏覽次數(shù)：4192
經(jīng)常訪(fǎng)問(wèn)阮一峰網(wǎng)站的人都知道，他網(wǎng)站的主頁(yè)的背景圖經(jīng)常變，每刷新一下都不一樣。這是怎么實(shí)現(xiàn)的呢？如果我網(wǎng)站上存儲(chǔ)這么多照片，那需要多大的存儲(chǔ)空間啊。顯然阮老師的網(wǎng)站上不可能存儲(chǔ)這么多照片的。那么該如何模仿阮老師的網(wǎng)站實(shí)現(xiàn)動(dòng)態(tài)刷新網(wǎng)站背景圖呢？而且每次還不一樣。
其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，我們只需要找一個(gè)提供大量圖片的網(wǎng)站即可。
最近我在無(wú)意之間發(fā)現(xiàn)了 https://picsum.photos/ 這個(gè)網(wǎng)站，它提供了很多免費(fèi)的圖片，而且這些圖片可以根據(jù)你的需要獲取指定大小的圖片。還可以讓你每次獲取的圖片都不一樣。結(jié)合 https://picsum.photos/ 提供的 api，再配合上簡(jiǎn)單的 css 代碼即可實(shí)現(xiàn)這一功能。一下是一個(gè)簡(jiǎn)單的 demo 實(shí)現(xiàn)代碼：
企業(yè)建站知識(shí)
推廣知識(shí)
小程序
微信營(yíng)銷(xiāo)
APP開(kāi)發(fā)
<!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>塔燈網(wǎng)絡(luò)：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>看吧，很簡(jiǎn)單吧。世上無(wú)難事，只怕有心人！
日期：2019-09 瀏覽次數(shù)：6827
日期：2019-09 瀏覽次數(shù)：4692
日期：2019-09 瀏覽次數(shù)：5507
日期：2019-09 瀏覽次數(shù)：10732
日期：2019-09 瀏覽次數(shù)：10773
日期：2019-09 瀏覽次數(shù)：4483
日期：2019-09 瀏覽次數(shù)：4076
日期：2019-09 瀏覽次數(shù)：3892
日期：2019-09 瀏覽次數(shù)：3459
日期：2019-09 瀏覽次數(shù)：4191
日期：2019-09 瀏覽次數(shù)：7914
日期：2019-09 瀏覽次數(shù)：3721
日期：2019-09 瀏覽次數(shù)：4240
日期：2019-09 瀏覽次數(shù)：3745
日期：2019-09 瀏覽次數(shù)：3890
日期：2019-09 瀏覽次數(shù)：4175
日期：2019-09 瀏覽次數(shù)：5757
日期：2019-09 瀏覽次數(shù)：3442
日期：2019-09 瀏覽次數(shù)：4486
日期：2019-09 瀏覽次數(shù)：3943
日期：2019-09 瀏覽次數(shù)：4180
日期：2019-09 瀏覽次數(shù)：4218
日期：2019-09 瀏覽次數(shù)：3553
日期：2019-09 瀏覽次數(shù)：4377
日期：2019-09 瀏覽次數(shù)：5484
日期：2019-09 瀏覽次數(shù)：5332
日期：2019-09 瀏覽次數(shù)：3626
日期：2019-09 瀏覽次數(shù)：8989
日期：2019-09 瀏覽次數(shù)：4581
日期：2019-09 瀏覽次數(shù)：3923
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.
