Hexo博客之butterfly主题优雅更换背景

选择如何修改

对于如何修改背景，我目前想到的方案有三种。

直接修改源文件
也就是直接修改主题目录下的index.sty文件，这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。
引入一个新的css文件
这个是我比较推荐的做法，毕竟”魔改一时爽，一直魔改一直爽“。
使用js文件
最不推荐的做法，这种做法会在一定程度上延缓网页加载的时间，并且修改方式较为复杂。
至于为什么，请自行科普 html 是如何渲染。

如何选择

对于上述三种方法，我选择第二种，理由与不足如下：

方式比较优雅。

相比第一种不会因为主题更新而再次修改

引入css文件在渲染时不会切换引擎

引入新的文件，会造成页面多一次的请求

覆盖方式可能会需要加!important

创建层叠样式表

这里以第二个方式，css 文件建立的方式有两种。

博主的 butterfly 主题为：2.3.0

在任意位置创建一个 css 文件，例如background.css。（简单来说，就是创建一个 txt 文件，把名字改为 background.css 即可。注意扩展名）

打开这个 css 文件，开始编辑
butterfly 主题的背景 div 的 id 为web_bg，因此我们只需要重新定义这个样式即可。
1
2
#web_bg {
}
修改为图片
1
2
3
4
5
6
7
8
#web_bg {
/* 背景图像的地址（url括号里） */
background: url();
/* 背景图像不重复 */
background-repeat: no-repeat;
/* 背景图像大小 */
background-size: cover;
}
关于 background 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
关于 background-repeat 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat
关于 background-size 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size

修改为渐变背景

例如蓝红色渐变

#web_bg {
  /* webkit内核 5.1 - 6.0 */
  background: -webkit-linear-gradient(left, red, blue);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(right, red, blue);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(right, red, blue);
  /* 标准的语法 */
  background: linear-gradient(to right, red, blue);
}

纯色背景
纯色背景可以直接在配置文件修改，因此可以直接修改配置文件。

引入文件

引入文件的方式有两种：以相对路径的方式引入和以外链的方式引入。如何选择请各位博主自己斟酌。

19-小康博客

以相对路径引入

将写好的 css 文件移动到\Butterfly\source\css\目录下。
然后修改配置文件的引入方式

以外链的方式引入

同样的可以将这个文件上传到 cdn，如七牛云、又拍云、GitHub+Jsdeliver 等。

只需要将引入地址写为你的文件外链地址即可。

例如我的 jsd 链接

修改文章页背景及透明度

此项修改主要是修改文章页背后的颜色。默认为白色不透明。

这里我个人建议使用rgba方式，前边的rgb也就是正常的 rgb 颜色。最后的a代表的是透明度。

/* 文章页背景 */
.layout > div:first-child:not(.recent-posts) {
  /* 以下代表白色透明度为0.3 */
  background: rgba(255, 255, 255, 0.3);
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#recent-posts > .recent-post-item,
.layout > div:first-child:not(.recent-posts),
.layout_post > #page,
.layout_post > #post,
.read-mode .layout_post > #post {
  /* 以下代表白色透明度为0.3 */
  background: rgba(255, 255, 255, 0.3);
}

1
2
3

.layout > div:first-child:not(.recent-posts) {
  background: rgba(255, 255, 255, 0.3);
}

1
2
3

.layout > div:first-child:not(.recent-posts) {
  background: rgba(255, 255, 255, 0.5);
}

1
2
3

.layout > div:first-child:not(.recent-posts) {
  background: rgba(255, 255, 255, 0);
}

如果文章样式失效则说明主题进行了更新，那么建议你在static-butterfly寻找相关写法。

附录

这里主要给出一个写修改的参考样式。样式效果请在背景测试页面进行测试。

下边只是部分示例，更多背景可在背景测试页面通过审查元素获取。

博主同款渐变背景(参考本文图片)

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

博主同款

粉蓝色渐变

#web_bg {
  /* 图片可下载上传到自己的图床也可以删掉*/
  background-image: url('https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png'),
    -moz-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url('https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png'),
    -webkit-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url('https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png'),
    -ms-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url('https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png'),
    linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
}

有图片测试

无图片测试

美美哒渐变

#web_bg {
  background: linear-gradient(
    102.7deg,
    #fddaff 8.2%,
    #dfadfc 19.6%,
    #adcdfc 36.8%,
    #adfcf4 73.2%,
    #caf8d0 90.9%
  );
}

效果预览测试

动态渐变

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#web_bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

动态渐变

紫蓝色渐变

#web_bg {
  background: linear-gradient(
    to right bottom,
    rgb(0, 255, 240),
    rgb(92, 159, 247) 40%,
    rgb(211, 34, 255) 80%
  );
}

紫蓝色渐变

图片滤镜渐变

#web_bg {
  background-image: url('https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png'),
    linear-gradient(
      60deg,
      rgba(255, 165, 150, 0.5) 5%,
      rgba(0, 228, 255, 0.35)
    ),
    url('https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg');
}

图片滤镜渐变

背景图
参考壁纸页。
渐变配色
https://webgradients.com/
https://www.grabient.com/
更多（在线渐变配色的网站还有很多，可以自己去找）
或者自行扒取别人的配色，或者自己搭配都是可以的。
其他
更多骚操作都可以直接写在这个选择器下。

可能遇到的问题

背景不生效
- 请确保你能成功引入这个 css
- 请尝试关闭 js 动态背景后再次尝试
- 请将配置文件的background改为"#efefef"
- 请确保你写的内容正确且符合 css 的语法规则
其他问题
请先确保自己拥有一定的前端基础（如果拥有，你是不会遇到问题的）
学会如何使用百度搜索引擎
如果以上两种方式还是无法解决你的问题，那么可以在下方留言。留言请附上自己的站点，方便排查问题