Hexo自定义静态背景

发表于 更新于 分类于 阅读次数： 本文字数： 1.8k 阅读时长 ≈ 6 分钟

前言

虽然我知道你很想设置炫酷的动态背景。但先别急，我们一步步实现，现在先将静态的内容实现了。

准备素材

我们先准备一张希望放在博客上的图片：

2020夏日祭初音

哦不，等下，这个会不会有些太大了？,加载起来会很费力的哦。

那我们再想想办法。目前有一个网站叫做iloveImg，是能够节省大部分存储空间的。

唯一美中不足的是，国内基本是左右的速度，而搭上梯子能够达到。当然，这是WIFI的速度，千兆网线能更快。

于是呢，我们就拿到了这张图片：

2020夏日祭初音（压缩版）

压到了，相对于好几兆的照片还是很节省空间的。

创建样式表

然后，我们就准备加入一些样式。

样式表存储位置

加在哪里呢？NexT主题中提供了配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

我们需要将其中的

1
#style: source/_data/styles.styl

解开注释，变成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

这就相当于给定了引入样式表的文件路径。

需要注意的是，这个路径并不是themes/next/source文件夹，而是根目录下存放_post的source文件夹。

于是按照路径创建这样一个样式表，里面的内容就会生效。

需要注意的是，与前几个NexT版本不一样的是，NexT的第代，也就是现在我正在使用的版本，将需要如上述内容进行显式配置才能生效。

而NexT的第代乃至以前的版本，只需要在themes/next/source/css文件夹下就能够被打包，所以也不需要额外在意如何引用这些样式表。

设置背景图片

1
2
3
4
5
body {
  background-image: url(http://images.sakebow.cn/masuri-miku.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

于是你的body上就出现了一张相当明显的背景图。

添加背景图的效果

但是你发现，当我随着我的阅读进度往下划的过程中，背景图片就慢慢地消失了。

滚动将会出现问题

设置背景图片不会随着滚轮移动

这可不是我们希望看到的。于是增加了一个属性：

1
2
3
4
5
6
body {
  background-image: url(http://images.sakebow.cn/masuri-miku.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; // 让图片不随着滑轮移动
}

背景图片不会被移走

看着效果还不错。

设置背景图片透明度

当然，你觉得这样看起来太low了。 我们加点高级的，加点透明度。

opacity可不能随便用

你可能觉得，就是opacity（不透明度）了，对吧？

不过大家应该知道一个常识：opacity是一定会继承的。一旦父DOM定义了opacity，子DOM就一定会收到父DOM的不透明度属性，并且子DOM的opacity属性是定义的子DOM自身定义值与从父DOM继承下来的属性值相乘的结果。

例如，我们有一个父DOM叫做ul，opacity值为；其中的子DOM叫做li，opacity值为，最终li的实际opacity值将为。

并且还有一个致命的问题：opacity会将DOM中的内容一并透明化，整个就看不太清了。

都看不太清了

虽然说背景图片看得更清楚了，但是文章可就一点都看不到了啊！

让你意想不到的linear-gradient

有什么办法呢？用linear-gradient。没错，用linear-gradient。

它本身其实就是个创建线性渐变的工具，但我们似乎都忘了，gradient本质上是一种特殊的图像，如果按层叠样式表的定义去理解的话，可以理解为一种遮罩。

也就是说，只要我设置linear-gradient的不透明度为，那图片就不可见；如果不透明度设置为，那图片就完全可见。

所以，我们就直接这样设置：

1
2
3
4
5
6
7
body {
  background: linear-gradient(rgba(255, 245, 246, 1), rgba(255, 245, 246, .85), rgba(255, 245, 246, 1)), url(http://images.sakebow.cn/background/masuri-miku.jpg) no-repeat 0% 100%/ cover;
  background: -moz-linear-gradient(rgba(255, 245, 246, 1), rgba(255, 245, 246, .85), rgba(255, 245, 246, 1)), url(http://images.sakebow.cn/background/masuri-miku.jpg) no-repeat 0% 100%/ cover;
  background: -webkit-linear-gradient(rgba(255, 245, 246, 1), rgba(255, 245, 246, .85), rgba(255, 245, 246, 1)), url(http://images.sakebow.cn/background/masuri-miku.jpg) no-repeat 0% 100%/ cover;
  background: -o-linear-gradient(rgba(255, 245, 246, 1), rgba(255, 245, 246, .85), rgba(255, 245, 246, 1)), url(http://images.sakebow.cn/background/masuri-miku.jpg) no-repeat 0% 100%/ cover;
  background-attachment: fixed;
}

于是我们就得到了一个最上、最下不可见且中间有透明度的背景图片。

距离我们想要的效果非常接近了

似乎还不错。

背景图片专项优化

既然背景图片都这么优化了，我们是否应该将所有的板块全部透明化一点？不然的话，我们中意的背景就被大部分遮挡掉了。

怎么实现呢？同样的，如果是代以及以前的版本，只需要用CSS就能实现。但问题就在于，这是第代，CSS实现已经不起作用了。所以只能自行修改source/css/_variables/base.styl文件。

最简单粗暴的方法就是直接修改其中的body-bg-color与content-bg-color为rgba(0, 0, 0, 0)，就能够展现这样的效果：

显示更好的背景图片

看着挺好的。当然你也可以根据自己的喜好设置透明度范围、透明区域，基本上都是这个方法。

你以为跟自定义CSS有关么？

嗯？结束了啊，你在期待什么？

哦，我明白了，你在期待设定CSS以便直接给定rgba(0, 0, 0, 0)对吧？这样就不会动到这种根本的配置文件了。

但是很可惜，那些东西并不会起到什么作用。

你以为是CSS样式没有起作用？不，起作用了。在开发者工具中能够很清楚地看到rgba(0, 0, 0, 0)生效了，但依然没有变为透明色。

并不是因为是变量所以优先级更高，也并不是因为styl文件比CSS文件更优先，只不过是单纯的因为变量是全局声明的，全局定义的样式优先级更高，所以被覆盖了。

还记得吗，我们最开始使用Vue的时候，style标签中有一个scoped属性。其实就是为了不让该组件的样式对全局样式造成污染。

一样的道理。