Hexo-NexT 設置博客背景圖片


1. 設置背景圖片

將想要的背景圖片放入 themes/next/source/images。打開 themes/next/source/css/ _custom/custom.styl 文件,這個是 Next 故意留給用戶自己個性化定制一些樣式的文件,添加以下代碼即可。

實際上我的版本里沒有_custom,通過新建目錄無法實現。我是在 themes/next/source/css/_schemes/Gemini/index.styl 中添加的代碼,Gemini是我的 next 的布局樣式。

在寫這篇博客的過程中,又嘗試了下將代碼添加到 blog_root/source/_data/styles.style 下,設置成功。如果沒有這個目錄,直接新建即可。

body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重復
    background-size: cover;      //填充
    background-position:50% 50%;
}
  • background:url 為圖片路徑,也可以直接使用鏈接。
  • background-repeat:若果背景圖片不能全屏,那么是否平鋪顯示,充滿屏幕
  • background-attachment:背景是否隨着網頁上下滾動而滾動,fixed 為固定
  • background-size:圖片展示大小,這里設置 100%,100% 的意義為:如果背景圖片不能全屏,那么是否通過拉伸的方式將背景強制拉伸至全屏顯示。

2. 博客內容透明化

NexT 主題的博客文章均是不透明的,這樣讀者就不能好好欣賞背景圖片了,下面的方法可以使博客內容透明化:

在 blog_root/source/_data/styles.style 中添加以下內容:

//博客內容透明化
//文章內容的透明度設置
.content-wrap {
  opacity: 0.9;
}

//側邊框的透明度設置
.sidebar {
  opacity: 0.9;
}

//菜單欄的透明度設置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框(local-search)的透明度設置
.popup {
  opacity: 0.9;
}

注意:其中 header-inner 不能使用 opacity 進行配置。因為 header-inner 包含 header.swig 中的所有內容。若使用 opacity 進行配置,子結點會出很多問題。

3. 參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM