next主题添加背景,并设置页面透明度
next主题添加背景，并设置页⾯透明度
title: hexo添加背景，并设置页⾯透明度
date: 2020-06-28 17:33
tags:
hexo
next
categories:
hexo
next
next主题添加背景，并设置透明度
⼀路上磕磕碰碰终于修成正果
这可是真⼼痛苦，看别⼈都是在 custom.styl 修改，我左⼜，实在是不到，在我即将绝望之时，终于看到了⼤佬的⼀篇博客，但是这并不是结束，才是开始。
我们⼀步步来，其中有我⾎的教训，我们来到博客的根⽬录，到 _l 并打开，按住 ctrl + f 搜索 custom_file_path: 把style: source/_data/styles.styl 注释取消掉（修改后如下）
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
注意了，我们接下来来到博客根⽬录，发现 source ⾥⾯并没有 _data 于是我们⾃⼰创建⼀个，并且在 _data ⾥⾯创建⼀个styles.styl ⼀定记得后缀别弄错了，我当初弄了个css的⽂件，耽误了半天。
然后在该⽂件⾥⾯添加如下代码（url⾥⾯是图⽚地址，可以填你图床⾥的图⽚地址，也可以填写你博客⽂件⽬录下的图⽚地址）
body{
background:url(图⽚地址);
background-repeat: no-repeat;
background-attachment:fixed;
background-size:cover;
background-position: 50% 50%;
}
但是由于我们⽂章是不透明的，影响了我们的美观，我们还得修改⼀下透明度（代码如下，依旧放在styles.styl⽂件内）
.content-wrap{
opacity: 0.9;
}
.sidebar{
opacity: 0.9;
}
.header-inner{
background:rgba(255,255,255,0.9);
}
.popup{
opacity: 0.9;
}
这⼀切都弄完了，我们保存，然后在本地查看⼀下效果。在博客根⽬录处打开git bash（这个不会不会不知道吧，除⾮博客不是你⾃⼰弄的），然后输⼊如下命令。
hexo clean
hexo g
hexo s
怎么创建自己的博客然后浏览器⾥⾯查看，如果没啥问题就⾃⼰部署上去就OK了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。