Next主题自定义配置背景图和透明度

发表于 分类于 ， 阅读次数： Changyan： 本文字数： 627 阅读时长 ≈ 1 分钟

Hexo主题纯色有些单调，可以通过自定义配置修改背景并实现透明化

1. 适用版本

Next 8.9.0 & Hexo 6.0.0

2. 设置自定义背景

创建样式文件

  1. 在这个目录下Hexo目录\source_data\创建styles.styl
  2. 添加如下代码
    1
    2
    3
    4
    5
    6
    7
    8
    body {
        background: url(背景图地址);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        backgound-position: 50% 50%;

    }

3. 配置透明度

设置如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//文章页面等透明化处理
.main-inner { 

    background: rgba(255,255,255,0.7) none repeat scroll !important;


}


//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9) none repeat scroll !important;
}


//页脚配置 以下颜色取决于你的背景
.footer{
    color: #fff;    
}
 //如果没开启页脚显示Hexo版本信息和Next版本信息可以省略
.powered-by>a{
color: #fff;
}