关于如何选择修改以及如何修改背景，我现在想的方案有三个。
直接修改源文件
也就是说，直接修改主题目录下的index.sty文件。 这个方法简单直接。 唯一的不足是每次更新主题都需要重新修改。
引入新的css文件
这是我推荐的做法，但还是“魔改一时爽，一直魔改一直爽”。
使用js文件
最不推荐的方法是在一定程度上延迟网页加载时间，使修改方法变得复杂。
为什么这么说呢，请自己科学一下html是如何呈现的。
如何选择上述三种方法，我选择第二种。 理由和不足如下。
方式比较优雅。
第一，主题更新不会再次修改
导入css文件后，渲染时不会切换引擎
引入新文件时，会多次请求页面
覆盖方式可能需要追加！ 导入
创建级联样式表这里是第二种方法，有两种方法可以创建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
了解更多关于背景大小的用法： https://developer.Mozilla.org/zh-cn/docs/web/CSS/background-size
修改为渐变背景
例如蓝红色渐变
#web_bg { /* webkit内核5.1-6.0 */background :-WebKit-linear-gradient (左、红、蓝)；/* opera 11.1-12.0 */background :-o-linear-gradient (轻型、红色、蓝色)；/* Firefox 3.6-15 */background :-moz-linear-gradient (轻型，红色，蓝色)； /*标准语法*/background :线性梯度(to right，red，blue )； }单色背景
单色背景可以直接在配置文件中修改，因此可以直接修改配置文件。
有两种导入文件的方法：使用相对路径导入文件，以及使用外链导入文件。 如何选择请各位博主自己斟酌。
将已写入的css文件以相对路径移动到Butterflysourcecss目录。
接下来，我们将更改配置文件的部署方式
除了链式方式以外，同样也可以将该文件上传到cdn上。 例如七牛云、或拍云、GitHub Jsdeliver等。
把导入地址作为你的文件的链接地址写就可以了。
例如我的jsd链接
修改文章页面的背景和透明度这个修改主要是修改文章页面背后的颜色。 默认值为白色不透明。
这里个人推荐rgba方式。 前面的rgb也就是普通的rgb颜色。 最后一个a代表透明度。
/*文章页面背景*/.layout_post#post { /*以下表示白色透明度为0.3 */background : rgba (255，255，3)。 (/)所有背景)包括首页卡片、文章页面、页面等(*/#aside_content .card-widget，# recent-posts.recent-post-iiid ) . read-mode .layout_post#post{ /*以下表示白色透明度为0.3 */background 3360 rgg } { % tabs ta B- rgba % }
. layout_post#post { backgro
und: 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的语法规则其他问题
请先确保自己拥有一定的前端基础（如果拥有，你是不会遇到问题的）
学会如何使用百度搜索引擎
如果以上两种方式还是无法解决你的问题，那么可以在下方留言。留言请附上自己的站点，方便排查问题