發(fā)表日期:2019-09 文章編輯:小燈 瀏覽次數(shù):4486
經(jīng)常訪問阮一峰網(wǎng)站的人都知道,他網(wǎng)站的主頁的背景圖經(jīng)常變,每刷新一下都不一樣。這是怎么實現(xiàn)的呢?如果我網(wǎng)站上存儲這么多照片,那需要多大的存儲空間啊。顯然阮老師的網(wǎng)站上不可能存儲這么多照片的。那么該如何模仿阮老師的網(wǎng)站實現(xiàn)動態(tài)刷新網(wǎng)站背景圖呢?而且每次還不一樣。
其實實現(xiàn)起來很簡單,我們只需要找一個提供大量圖片的網(wǎng)站即可。
最近我在無意之間發(fā)現(xiàn)了 https://picsum.photos/ 這個網(wǎng)站,它提供了很多免費的圖片,而且這些圖片可以根據(jù)你的需要獲取指定大小的圖片。還可以讓你每次獲取的圖片都不一樣。結(jié)合 https://picsum.photos/ 提供的 api,再配合上簡單的 css 代碼即可實現(xiàn)這一功能。一下是一個簡單的 demo 實現(xiàn)代碼:
<!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>
看吧,很簡單吧。世上無難事,只怕有心人!
日期:2019-09 瀏覽次數(shù):7120
日期:2019-09 瀏覽次數(shù):4939
日期:2019-09 瀏覽次數(shù):5741
日期:2019-09 瀏覽次數(shù):11011
日期:2019-09 瀏覽次數(shù):11021
日期:2019-09 瀏覽次數(shù):4714
日期:2019-09 瀏覽次數(shù):4308
日期:2019-09 瀏覽次數(shù):4133
日期:2019-09 瀏覽次數(shù):3641
日期:2019-09 瀏覽次數(shù):4485
日期:2019-09 瀏覽次數(shù):8180
日期:2019-09 瀏覽次數(shù):3962
日期:2019-09 瀏覽次數(shù):4459
日期:2019-09 瀏覽次數(shù):3925
日期:2019-09 瀏覽次數(shù):4176
日期:2019-09 瀏覽次數(shù):4422
日期:2019-09 瀏覽次數(shù):5992
日期:2019-09 瀏覽次數(shù):3684
日期:2019-09 瀏覽次數(shù):4716
日期:2019-09 瀏覽次數(shù):4166
日期:2019-09 瀏覽次數(shù):4473
日期:2019-09 瀏覽次數(shù):4490
日期:2019-09 瀏覽次數(shù):3752
日期:2019-09 瀏覽次數(shù):4588
日期:2019-09 瀏覽次數(shù):5693
日期:2019-09 瀏覽次數(shù):5525
日期:2019-09 瀏覽次數(shù):3909
日期:2019-09 瀏覽次數(shù):9254
日期:2019-09 瀏覽次數(shù):4779
日期:2019-09 瀏覽次數(shù):4159
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.