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

最新推荐文章于 2025-03-19 14:48:17 发布

DreamyTZK

最新推荐文章于 2025-03-19 14:48:17 发布

阅读量1.2w

点赞数 4

分类专栏： # 优雅魔改 Hexo

本文链接：https://blog.youkuaiyun.com/u012208219/article/details/106882981

版权

Hexo 同时被 2 个专栏收录

13 篇文章

订阅专栏

优雅魔改

3 篇文章

订阅专栏

本文介绍了如何优雅地更改Hexo博客中Butterfly主题的背景，推荐通过创建新CSS文件来实现，避免因主题更新而重复修改。内容包括选择修改方式、创建层叠样式表、引入文件的两种方式以及修改文章页背景和透明度的技巧。同时，提供了可能出现的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择如何修改

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

直接修改源文件

也就是直接修改主题目录下的index.sty文件，这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。
引入一个新的css文件

这个是我比较推荐的做法，毕竟”魔改一时爽，一直魔改一直爽“。
使用js文件

最不推荐的做法，这种做法会在一定程度上延缓网页加载的时间，并且修改方式较为复杂。

至于为什么，请自行科普html是如何渲染。

如何选择

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

方式比较优雅。

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

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

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

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

创建层叠样式表

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

博主的butterfly主题为：2.3.0

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

打开这个css文件，开始编辑

butterfly主题的背景div的id为web_bg，因此我们只需要重新定义这个样式即可。
```
#web_bg{}
```
修改为图片
```
#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_post>#post {
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}

{% tabs tab-rgba %}

.layout_post>#post {
    background: rgba(255,255,255,.3);
}

.layout_post>#post {
    background: rgba(255,255,255,.5);
}

.layout_post>#post {
    background: rgba(255,255,255,0);
}

{% endtabs %}

附录

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

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

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

#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的语法规则
其他问题

请先确保自己拥有一定的前端基础（如果拥有，你是不会遇到问题的）

学会如何使用百度搜索引擎

如果以上两种方式还是无法解决你的问题，那么可以在下方留言。留言请附上自己的站点，方便排查问题