首页 > 其他分享 >Hexo+Butterfly主题设置背景透明度和字体

Hexo+Butterfly主题设置背景透明度和字体

时间:2022-11-19 13:00:12浏览次数:39  
标签:Butterfly layout Hexo 透明度 post css 255

效果

新建css文件

引入css改变页面的样式,推荐在一个自己新建目录创建。有人选择在主题文件夹下找到css文件夹(\themes\Butterfly\source\css),这样系统升级可能会把自己的代码覆盖掉。本人是在Blog\CodeRain\source\css新建一个transpancy.css文件(文件名可以自取),修改最右边的数字改变透明度。

目录截图:

transpancy.css文件

/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.7);
}

/* 所有页面背景 */
#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.7 */
    background: rgba(255,255,255,.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}

引入css 文件

在主题配置文件_config.yml引入css文件,全局检索inject,在以下head位置插入字段

位置图片:

<link rel="stylesheet" href="/css/transpancy.css">

标签:Butterfly,layout,Hexo,透明度,post,css,255
From: https://www.cnblogs.com/Code-Rain/p/16905895.html

相关文章

  • Hexo-Butterfly添加天气插件
    ​我的小站——半生瓜のblog感谢糖果屋Akilar店长的帮助——Akilarの糖果屋2021.11.15更新。这里推荐一下小孙同学添加的天气插件,更加美观。——​Butterfly主题添加天气......
  • 【hexo】butterfly主题添加备案信息
    butterfly主题添加备案信息由于新版butterfly主题删除了ICP配置,所以我们无法直接通过改_config.yml文件来设置备案信息显示。1.按照路径找到footer.pug文件2.打开编辑加入......
  • Hexo + gitHubPage +git博客搭建
    Hexo+gitHubPage+git博客搭建之前参照网上的教程完成了博客的搭建。记录下自己怎么搭建博客的。大致流程如下:环境搭建(包括NodeGit)Github账号注册和配置安装配......
  • 使用 Gitea + Drone CI 自动部署 Hexo 静态网站到 Cloudflare Pages
    前段时间使用Hexo重建了个人博客。我之前一直使用VSCode在本地写博客,用git推送到GitHub存档,每次推送的之后都由GitHubActions自动构建Hexo静态网站然后发布......
  • Hexo主题next中添加天气插件(心知天气)
    最近想在博客主题中添加一个天气插件,在网上搜索一番以后选择了【心知天气】。实现在博客中预报天气的效果。首先要去心知天气的官网,获取插件代码,具体方式可以参见【官方文......
  • geoserver wms透明度
    03-GeoServerWMS服务参数讲解:https://zhuanlan.zhihu.com/p/471099042transparent参数是修改背景透明度Geoserver中调整polygon图层的填充颜色透明度:https://blog.csdn.......
  • hexo博客部署到夸克板
    hexo博客部署到夸克板引言因为阿里云服务器的学生优惠结束了,再买就要一年上千的价格,学生党表示口袋空空。所以采用夸克板来充当服务器。花生壳解决内网外网穿透问题。......
  • 手把手教你打造语雀+Hexo+Github Actions+COS持续集成
    引言之前学习和工作过程中,经常会写一些东西,包括心得体会,一些笔记,自己的一些见解。本来一直在用语雀,最近突发奇想,打算把自己写的这些乱七八糟分享出来,搭个独立博客,和更多的......
  • Hexo Next主题vercel页面NOT_FOUND
    前端时间将博客部署到了Vercel上,使用的是HexoNext主题。发现某些博文点进去以后会出现找不到的情况:404:NOT_FOUNDCode:NOT_FOUNDID:......经过一番排查,原来是因......
  • Hexo博客搭建和简单部署
    title:Hexo博客搭建和简单部署date:2020-03-0212:00:00categories:[IT,博客][IT,软件,程序][IT,软件,搭建与配置]tags:hexo博客网站搭建comments:true......