Hexo之更换背景及透明度
Hexo之更换背景及透明度
Hexo系列文章已经完成上传：
一、Hexo准备---Node.js、Vue
二、Hexo、主题、部署上线
三、Butterfly美化
四、Hexo之更换背景及透明度
五、Hexo-使用阿里iconfont图标
六、PicGo：搭建图床
七、Hexo-域名设置+收录
引入方式
首先，介绍一下引入方式，外部导入css文件，不影响内部配置。
1.创建css文件
创建一个css文件移动到\themes\butterfly\source\css目录下。
2.引入
inject在\source\_data的butterfly.yml中：
（如果没有，可以创建一个_data文件夹，将\themes\butterfly中的 _config.yml复制过去，重命名为butterfly.yml）
按以下方式引入css文件。
<link rel="stylesheet" href="/css/mycss.css">
修改透明度
将以下代码复制到你所创建的css文件,引入即可。
/* 文章页背景 */
.layout_post>#post {
/* 以下代表透明度为0.5 可以自行修改*/
background: rgba(255,255,255,.5);
}
/* 所有页面背景 */
#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.5 */
background: rgba(255,255,255,.5);
}
1.透明度为0.1
.layout_post>#post {
background: rgba(255,255,255,.1);
}
2.透明度为0.5
.layout_post>#post {
background: rgba(255,255,255,.5);
}
3. 0 全透明
.layout_post>#post {
background: rgba(255,255,255,0);
}
更换博客背景
1.背景div
butterfly主题的背景div的id为web_bg，因此我们只需要重新定义这个样式即可。
#web_bg{ }
2.图片背景
#web_bg {
/* 背景图像的地址（url括号里） */
background: url();
/* 背景图像不重复 */
background-repeat: no-repeat;
/* 背景图像大小 */
background-size: cover;
}
3.背景渐变
1.博客同款
本博客同款,在创建的css文件中复制以下代码:
#web_bg {
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
2.动态渐变
@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;
}
3.紫蓝色渐变
#web_bg {
background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);
}
4.图片渐变
第二个url中是图片地址，可以自行修改。
#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://upimage.alexhchu.com/2020/10/19/34446d0d37dde.jpg");
}
5.自行选择
大家可以选择上述渐变，当然也可以自行选择：
以下是两款渐变色网站：
https://uigradients.com/#EveningNight
将复制的css代码放入css文件中即可。
（注：复制的css代码需要放在#web_bg{}中）
背景不生效
1.确保你能成功引入这个css
2.请尝试关闭js动态背景后再次尝试
3.将butterfly.yml的background改为"#efefef"
4.确保你写的内容正确且符合css的语法规则
