1. 程式人生 > >自定義部落格園部落格的背景圖片

自定義部落格園部落格的背景圖片

> 看到別人的部落格背景自己也想弄一個,搜了很多方法,但是都只是把一堆程式碼貼著,完全沒有告訴我設定背景圖片的程式碼到底是什麼,自己研究了一下,現在把它分享給跟我一樣有好奇心的朋友。 步驟一共2步: ### 1.上傳圖片到相簿 首先把自己想要做背景的圖片上傳到部落格園,步驟如下: 首先進入到自己的部落格,然後點選管理,如下 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218145957342-1482519950.png) 點選相簿 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218150012549-864557486.png) 建立一個相簿(如果自己有可以不用建立,這裡看自己)再把圖片上傳上去 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218150031225-774607219.png) 到止,圖片就成功上傳到部落格園的伺服器了。 ### 2.自己編寫css程式碼 要想設定背景圖片,思考一下,是不是隻需要把背景換成我們的圖片地址就行了,設定`background-image`屬性就可以了,現在拿到圖片的地址就可以了,進入上面我們建立的相簿。 點開相簿,開啟我們所需要的圖片,然後點選檢視原圖 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218150123535-1779440767.png) 最後複製圖片地址即可 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218150138427-1783284774.png) 頁面定製 CSS 程式碼 ```css body{ background-image:url(https://images.cnblogs.com/cnblogs_com/ctf99525/1932586/o_210218052305202103.jpg); background-attachment:fixed; //設定背景影象是否固定或者隨著頁面的其餘部分滾動 } ``` 現在部落格的背景就是這張圖片了。 如果想要透明效果,可以在`#home`加一個`opacity`屬性,`opacity`屬性指定了一個元素後面的背景的被覆蓋程度。規定不透明度從 0.0 (完全透明)到 1.0(完全不透明)。 ```css #home{ opacity:0.8; //0.0到1隨便設定,越低越透明 } ``` 到此部落格的背景圖片就設定完成了 ![](https://img2020.cnblogs.com/blog/2181674/202102/2181674-20210218150427285-1341456073.png) 如果有幫助到你,動動手指點個推薦,有什麼問題可以在評論區寫出來,大家一起交流