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 進行配置,子結點會出很多問題。
