butterfly主题卡片修改为透明

参考:hexo-Butterfly 文章卡片颜色修改 | 小小岛

记录一下以免以后又忘了。

主页文章卡片仍然是不透明的,打开开发者工具找盒子,小小的改动了一下。

  • 修改了主页文章卡片的透明度代码。

  • 添加了tag标签内文章卡片的透明度代码。

/* 主页所有文章页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-items>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.8 */
    background: rgba(255,255,255,.8);
}

/*侧边栏页面*/
#aside-content>.card-widget  {
	background: rgba(255,255,255,.8);
}
#aside-content>.sticky_layout>.card-widget{
	background: rgba(255,255,255,.8);
}
/*文章页面*/
.layout>#post{
	background: rgba(255,255,255,.8);
}
/*标签页面*/
.layout>#page{
	
	background: rgba(255,255,255,.8);
}
/*分类页面*/
.layout>#tag{
	
	background: rgba(255,255,255,.8);
}
/*时间轴页面*/
.layout>#archive{
	background: rgba(255,255,255,.8);
}

忘记还有黑夜模式了,没改动。

参考:hexo-Butterfly 文章卡片颜色修改 | 小小岛

/* 黑夜模式下*/
[data-theme='dark'] #recent-posts > .recent-post-item{
    background:rgba(0, 0, 0, 0.6)!important;
}
[data-theme='dark'] .card-widget{
  background:rgba(0, 0, 0, 0.9)!important;
}
[data-theme='dark'] div#post{
  background:rgba(0, 0, 0, 0.9)!important;
}
[data-theme='dark'] div#page{
  background:rgba(0, 0, 0, 0.9)!important;
}
[data-theme='dark'] div#archive{
  background:rgba(0, 0, 0, 0.9)!important;
}
[data-theme='dark'] div#tag{
  background:rgba(0, 0, 0, 0.9)!important;
}
[data-theme='dark'] div#category{
  background:rgba(0, 0, 0, 0.9)!important;
}
posted @ 2025-02-06 11:45  快乐星猫i  阅读(99)  评论(0)    收藏  举报