51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Hexo文章页面透明效果

前言 {#前言}

在不妨碍正常阅读的情况下想更好地展示背景或者一些效果,实现文章页透明是一种不错的选择。

操作步骤 {#操作步骤}

\themes\butterfly\source\css路径下创建一个xxx.css文件,在文件中添加如下代码:

|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | /* 首页文章栏背景透明 */ #recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color) } /* 侧边栏透明 */ #aside-content .card-widget { background: var(--light_bg_color) } |

然后将该文件引入到_config.butterfly.yml文件中inject的head处:

|-----------|-------------------------------------------------------| | 1 | - <link rel="stylesheet" href="/css/xxx.css"> |

重新部署后就可以看到效果啦


赞(0)
未经允许不得转载:工具盒子 » Hexo文章页面透明效果