Hexo Next主题自定义背景

发表于
修改Next默认的纯白背景。

保存图片

将自己的图片命名为background保存到以下路径：
\themes\next\source\images

修改样式

进入以下路径：
\themes\next\source\css\_schemes

选择当前使用的Hexo主题

进入上述路径后里面应该有四个文件夹（Gemini, Mist, Muse, Pisces），进入你现在用的这个主题的文件夹。

编辑index.styl文件

  1. 打开当前使用主题的index.styl文件，找到如下注释字段：

    index.styl
    1
    2
    3
    4
    // ==================================================
    // Desktop layout styles.
    // ==================================================
    // Post blocks.

  2. 在下面新增一行，添加如下代码：

    index.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 整体背景设置
    body {
    	background:url(/images/background.jpg);// 设定背景图片,注意修改图片后缀
    	background-repeat: no-repeat;// 设定背景图片非重复填充
    	background-attachment:fixed;// 设置背景图片不随页面滚动
    	background-position:50% 50%;// 设置背景图片位置
    	background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
    }

    // 设置透明度
    .main-inner{
    	opacity: 0.95;
    }
    .header-inner{
    	opacity: 0.95;
    	z-index: 10;
    }

    代码引用自：Hexo Next 自定义背景

  3. 清理和编译。