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

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

效果展示

当前透明度设置为0.9，所以不是特别明显，可以根据自己博客背景调整参数

新建css文件

引入css改变页面的样式，在主题文件夹下找到css文件夹（\themes\butterfly\source\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.9 */
    background: rgba(255, 255, 255, .9);
}

/*侧边卡片的透明度 */
:root {
    --card-bg: rgba(255, 255, 255, .9);
}

/* 页脚透明 */
#footer {
    /* 以下代表透明度为0.1*/
    background: rgba(255, 255, 255, .1);
}

引入css文件

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

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
      - <link rel="stylesheet" href="/css/transpancy.css">

若有需要去除页脚阴影，步骤如下

• 在_config.butterfly.yml配置文件中设置footer_bg: false

• themes\butterfly\source\css_layout\footer.styl文件中注释

  #footer
    position: relative
    //background-color: $light-blue
    background-attachment: scroll
    background-position: bottom
    background-size: cover