![图片[1]-Chevereto简单美化教程-鼎点&Blog](https://wp-blog.obs.cn-east-3.myhuaweicloud.com/wp-content/uploads/2025/12/image-68-1024x533.png)
如上图所示好多小伙伴觉得给Chevereto换上好看的背景图之后,最上方的导航栏就显得很突兀,所以针对这个问题,我也进行了研究,最终在代码中找到了修改这个效果的代码部分,下面就跟着步骤一步一步修改吧~
这里有两种修改方案,一种是改为毛玻璃效果,及半透明带模糊的效果,另一种是直接改为全透明,这个根据个人喜好修改即可!
毛玻璃效果
1.在网站的根目录按照以下路径打开并编辑:打开/content/legacy/themes/Peafowl/lib/peafowl.min.css
如图所示,这里的.css代码没有进行格式化,所以看起来很乱,但不影响操作
Ctrl+F查找下面的代码片段
.top-bar::before,.top-sub-bar::before{width:100%;
![图片[2]-Chevereto简单美化教程-鼎点&Blog](https://wp-blog.obs.cn-east-3.myhuaweicloud.com/wp-content/uploads/2025/12/image-69-1024x799.png)
在这句后面添加以下代码:
background-color: rgba(0, 0, 0, 0);
加完后的效果如下:
.top-bar::before,.top-sub-bar::before{width:100%;height:calc(100% + .5px);position:absolute;content:" "; background-color: rgba(0, 0, 0, 0);}
修改完成后刷新网页即可看到上边的导航栏变成了毛玻璃质感的效果~还是很好看的!
![图片[3]-Chevereto简单美化教程-鼎点&Blog](https://wp-blog.obs.cn-east-3.myhuaweicloud.com/wp-content/uploads/2025/12/image-70-1024x533.png)
全透明效果
全透明效果还是在这个文件内修改
路径是/content/legacy/themes/Peafowl/lib/peafowl.min.css
搜索以下代码片段:
min-height:50px;
![图片[4]-Chevereto简单美化教程-鼎点&Blog](https://wp-blog.obs.cn-east-3.myhuaweicloud.com/wp-content/uploads/2025/12/image-71-1024x828.png)
删掉这句即可!
返回网页刷新就可以看到效果啦!
![图片[5]-Chevereto简单美化教程-鼎点&Blog](https://wp-blog.obs.cn-east-3.myhuaweicloud.com/wp-content/uploads/2025/12/image-72-1024x533.png)
个人觉得全透明的效果用在浅色背景图比较好~





暂无评论内容