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

Dreamy.TZK

发布于 2020-05-07 14:59:23

4.9K1

发布于 2020-05-07 14:59:23

文章被收录于专栏：小康的自留地小康的自留地

选择如何修改

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

直接修改源文件也就是直接修改主题目录下的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); }
纯色背景纯色背景可以直接在配置文件修改，因此可以直接修改配置文件。

引入文件

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

以相对路径引入

将写好的css文件移动到\Butterfly\source\css\目录下。

然后修改配置文件的引入方式

以外链的方式引入

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

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

例如我的jsd链接

修改文章页背景及透明度

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

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

.layout_post>#post {
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}

.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);
}

附录

这里主要给出一个写修改的参考样式。

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

#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%
  );
}

2.粉蓝色渐变

#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%);
}

3.美美哒渐变

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

4.动态渐变

@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;
}

5.紫蓝色渐变

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

6.图片滤镜渐变

#web_bg{
    background: 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");
}