美文网首页
Hexo-Next-Mist主题头部顶栏背景图片设置

Hexo-Next-Mist主题头部顶栏背景图片设置

作者: Yeureka | 来源:发表于2017-03-23 13:24 被阅读0次

    Next-Mist 主题最上面一栏的默认背景是灰色的,略微有些淡。想要更换这张图片可按以下步骤操作。效果 Yeureka's study(2018.02.25:主题已换。)

    图片存放位置

    选择一张心仪的图片,命名为 background.jpg,放到 source 文件夹下的 image 文件夹内。

    Hexo\source\image
    

    图片大小我选择的是“50厘米*5厘米”,太小的话无法覆盖整个背景。

    背景图片设置

    找到如下位置:

    hexo\themes\next\source\css\_schemes\Mist\_header.styl
    

    打开 _header.styl,将第一行 background: 后的内容改为如下形式:

    .header { background: url('../image/background.jpg'); }
    

    保存,重新生成网页即可。

    以图床上的图片作为背景

    url() 内的链接可以是绝对地址的形式。因为我的静态博客在 github 上面,打开比较慢,所以将背景图片放到图床上以提高打开速度。设置形式如下:

    .header { background: url('http://xx.xx.xx.com/hexo/image/header-backgroud.jpg'); }
    

    设置了图床以后,每次打开博客都是图片最先刷出来。囧( ╯□╰ )

    相关文章

      网友评论

          本文标题:Hexo-Next-Mist主题头部顶栏背景图片设置

          本文链接:https://www.haomeiwen.com/subject/bsjznttx.html