歡迎您光臨深圳塔燈網絡科技有限公司!
電話圖標 余先生:13699882642

網站百科

為您解碼網站建設的點點滴滴

教你免費打造一款類似阮一峰網站背景圖動態更換的網頁

發表日期:2019-09 文章編輯:小燈 瀏覽次數:1122

經常訪問阮一峰網站的人都知道,他網站的主頁的背景圖經常變,每刷新一下都不一樣。這是怎么實現的呢?如果我網站上存儲這么多照片,那需要多大的存儲空間啊。顯然阮老師的網站上不可能存儲這么多照片的。那么該如何模仿阮老師的網站實現動態刷新網站背景圖呢?而且每次還不一樣。

其實實現起來很簡單,我們只需要找一個提供大量圖片的網站即可。

最近我在無意之間發現了 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://www.szdrf.com/21359.html
相關前端設計
 八年  行業經驗

多一份參考,總有益處

聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

咨詢相關問題或預約面談,可以通過以下方式與我們聯系

業務熱線:余經理:13699882642

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