Chevereto简单美化教程

图片[1]-Chevereto简单美化教程-鼎点&Blog

如上图所示好多小伙伴觉得给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

在这句后面添加以下代码:

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

全透明效果

全透明效果还是在这个文件内修改

路径是/content/legacy/themes/Peafowl/lib/peafowl.min.css

搜索以下代码片段:

min-height:50px;
图片[4]-Chevereto简单美化教程-鼎点&Blog

删掉这句即可!

返回网页刷新就可以看到效果啦!

图片[5]-Chevereto简单美化教程-鼎点&Blog

个人觉得全透明的效果用在浅色背景图比较好~

版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容