五、Hexo靜態博客背景及界面顯示優化配置

示例預覽：我的主頁

背景圖片添加

1. 自動切換背景

2. 靜態本地背景

   首先將已選定的背景圖片放到博客根目錄下的\source\images下

   ​ 示例：D:\Blog\source\images\background.jpg

   其次，打開配置文件：D:\Blog\themes\next\source\css\_custom\custom.styl

   // Custom styles.
   body { 
   	background-image: url(/images/background.jpg);
   	background-attachment: fixed;
   	background-repeat: no-repeat;
   	background-size: cover；
   }
   

界面顯示優化

在上面打開的配置文件body{}中繼續添加以下配置；(D:\Blog\themes\next\source\css\_custom\custom.styl)

  ```stylus

// Custom styles.
body {
background-image: url(/images/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover；

//改變背景色和透明度等
.main-inner {
	background: #fff;
	padding: 25px;
	opacity: 0.75;
	border-radius: 10px;
}

//修改頭部導航欄顯示寬度，透明度，位置等
#header {
    padding: 5px 25px;
	margin: 0 auto;
	margin-top:15px;
	width: 700px;
	opacity: 0.8;
	border-radius: 10px;
	
}

//修改底部展示信息顯示寬度，透明度，位置等
#footer {
	padding: 5px 25px;
	position: relative;
	margin: 0 auto;
	margin-bottom: 5px;
	width: 700px;
	opacity: 0.8;
	border-radius: 10px;
}

}
```

此時，修改完上面的配置可能會發現首頁博客主體部分的下方與底部展示信息的間隙過大，我們加入以下配置進行調整，需要注意的是，此時添加的配置與上方添加位置不同，需要在body{}下方添加；

body .main {
  margin-bottom: 45px;
}

完整配置如下：

// Custom styles.
body { 
	background-image: url(/images/background.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover；
	
	
	//改變背景色和透明度
	.main-inner {
		background: #fff;
		padding: 25px;
		opacity: 0.75;
		border-radius: 10px;
	}
	
	#header {
	    padding: 5px 25px;
		margin: 0 auto;
		margin-top:15px;
		width: 700px;
		opacity: 0.8;
		border-radius: 10px;
		
	}
	
	#footer {
		padding: 5px 25px;
		position: relative;
		margin: 0 auto;
		margin-bottom: 5px;
		width: 700px;
		opacity: 0.8;
		border-radius: 10px;
	}
}

body .main {
  margin-bottom: 45px;
}