Next主題個性化之自動更換背景圖片
阿新 • • 發佈:2019-02-08
如果覺得next的空白主題看膩了或者太多人用覺得不夠個性化,那麼不妨試試自動更新背景圖片。
實現的原理
圖片來源
自動更換背景的實現是修改新增背景的css樣式實現。圖片來源是
https://source.unsplash.com/
這個網站,裡面不僅免費提供了很多高清美圖,而且還提供api介面呼叫,實在是良心。這裡實現的原理也是呼叫了這個網站的介面。
修改背景樣式
修改themes\next\source\css\ _custom\custom.styl檔案,這個是Next故意留給使用者自己個性化定製一些樣式的檔案,新增以下程式碼:
body {
background :url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
如果自己不喜歡這個網址提供的圖片做背景,那麼修改url()裡面的路徑即可。repeat、attachment、position就是調整圖片的位置,不重複出現、不滾動等等。
修改不透明度
完成這一步其實背景就會自動更換了,但是會出現一個問題,因為next主題的背景是純透明的,這樣子就造成背景圖片的影響看不見文字,這對於部落格來說肯定不行。
那麼就需要調整背景的不透明度了。同樣是修改themes\next\source\css\ _custom\custom.styl檔案。在後面新增如下程式碼
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}
- background: #fff; 白色
- opacity: 0.8;不透明度
效果
完成上述設定,我們來看看效果