發表日期:2019-09 文章編輯:小燈 瀏覽次數:4431
經常訪問阮一峰網站的人都知道,他網站的主頁的背景圖經常變,每刷新一下都不一樣。這是怎么實現的呢?如果我網站上存儲這么多照片,那需要多大的存儲空間啊。顯然阮老師的網站上不可能存儲這么多照片的。那么該如何模仿阮老師的網站實現動態刷新網站背景圖呢?而且每次還不一樣。
其實實現起來很簡單,我們只需要找一個提供大量圖片的網站即可。
最近我在無意之間發現了 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 瀏覽次數:7081
日期:2019-09 瀏覽次數:4897
日期:2019-09 瀏覽次數:5699
日期:2019-09 瀏覽次數:10964
日期:2019-09 瀏覽次數:10983
日期:2019-09 瀏覽次數:4675
日期:2019-09 瀏覽次數:4271
日期:2019-09 瀏覽次數:4092
日期:2019-09 瀏覽次數:3611
日期:2019-09 瀏覽次數:4430
日期:2019-09 瀏覽次數:8127
日期:2019-09 瀏覽次數:3927
日期:2019-09 瀏覽次數:4426
日期:2019-09 瀏覽次數:3903
日期:2019-09 瀏覽次數:4144
日期:2019-09 瀏覽次數:4393
日期:2019-09 瀏覽次數:5953
日期:2019-09 瀏覽次數:3648
日期:2019-09 瀏覽次數:4683
日期:2019-09 瀏覽次數:4133
日期:2019-09 瀏覽次數:4432
日期:2019-09 瀏覽次數:4445
日期:2019-09 瀏覽次數:3726
日期:2019-09 瀏覽次數:4559
日期:2019-09 瀏覽次數:5667
日期:2019-09 瀏覽次數:5495
日期:2019-09 瀏覽次數:3866
日期:2019-09 瀏覽次數:9211
日期:2019-09 瀏覽次數:4750
日期:2019-09 瀏覽次數:4118
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.