选择如何修改

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

  1. 直接修改源文件

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

  2. 引入一个新的css文件

    这个是我比较推荐的做法,毕竟”魔改一时爽,一直魔改一直爽“。

  3. 使用js文件

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

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

如何选择

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

方式比较优雅。

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

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

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

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

创建层叠样式表

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

博主的butterfly主题为:2.3.0

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

  1. 打开这个css文件,开始编辑

    butterfly主题的背景div的id为web_bg,因此我们只需要重新定义这个样式即可。

    #web_bg{}
  2. 修改为图片

    #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

  3. 修改为渐变背景

    例如蓝红色渐变

    #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);
    }
  4. 纯色背景

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

引入文件

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

19-小康博客

以相对路径引入

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

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

以外链的方式引入

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

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

例如我的jsd链接

修改文章页背景及透明度

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

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

/* 文章页背景 */
.layout>div:first-child:not(.recent-posts) {
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.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,.3);
}
.layout>div:first-child:not(.recent-posts) {
    background: rgba(255,255,255,.3);
}

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

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

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

附录

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

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

  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-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");
    }
    图片滤镜渐变
  7. 背景图

    参考壁纸页。

  8. 渐变配色

    https://webgradients.com/
    https://www.grabient.com/

    更多(在线渐变配色的网站还有很多,可以自己去找)

    或者自行扒取别人的配色,或者自己搭配都是可以的。

  9. 其他

    更多骚操作都可以直接写在这个选择器下。

可能遇到的问题

  1. 背景不生效

    • 请确保你能成功引入这个css
    • 请尝试关闭js动态背景后再次尝试
    • 请将配置文件的background改为"#efefef"
    • 请确保你写的内容正确且符合css的语法规则
  2. 其他问题

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

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

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