效果图1
效果图2

1.改变透明度

卡片透明度

在souce文件夹中新建css文件夹，用来存放所有自行配置的css文件，与img文件夹同理，防止更新后被覆盖。在文件夹中新建transparency.css文件，编写以下代码。

/* 明亮模式透明度0.75 */
:root {
--card-bg: rgba(255, 255, 255, .75);
}

/* 黑暗模式透明度0.7 */
[data-theme="dark"] {
--card-bg: rgba(12, 12, 12, .7);
}

在主题配置文件的inject下按格式填写css，其中根目录为source文件夹。

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

页脚透明度

在主题配置文件中，将页脚颜色直接设置为transparent。

1 2	# Footer Background footer_bg: transparent

因为有遮罩的关系，既保留了底色来显示文字，又可以和背景融为一体。
页脚效果

2.改变top颜色

新建css文件命名为headtransparency，编写以下代码。

/* 取消top颜色以支持cover透明图片显示背景 */
#page-header{
    background-color: unset;
}

同样添加到inject中

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

因为顶图优先级top_img > cover，而cover既可以作为文章封面，又可以在top_img未设置时作为顶图，所以我准备全使用cover设置图片，省去多余图片设置。但在top_img未设置时，主题的蓝色 #49b1f5 会作为背景色填充，因为图片的webp和png格式有alpha通道，存在透明的图片会显露出cover图片下被默认填充的背景色，所以需要取消页眉的背景色填充，这样就可以透出页面背景。另外页眉同样有遮罩，比较合适。

# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
mask:
  header: true
  footer: true

教学

实际上css的内容操作是使用浏览器F12调试摸索的，需要在右侧的样式中逐一查找对应属性。
点击元素获取id
因为我从未接触过css，速成只能利用网络文档和AI，自行摸索出了结果，而网络上流传的许多修改透明度方法千篇一律都是屎山代码，长篇大论中仅有一两句有用，且不适配黑暗模式的页面，所幸我最后自行排查出了结果，并简化了代码。

另外我认为无需单独配置每个卡牌的透明度，如果透明度各不相同那页面会很不美观，又因为所有卡片都使用 --card-bg 作为颜色，那在两种页面模式下配置它即可，既省事又高效，但rgba函数仍需获取颜色作为填充，我选取了原主题颜色，可以自行调整。

以下是避雷

雷同的网络教程
以下这是网络教程的雷同代码,除开页脚我直接设置为transparent外，仅两句可用，分别是.recent-post-item和最主要的–card-bg，且因为全覆盖设置成白色，完全不适配原黑暗模式页面。

/* 文章页背景 */
.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);
}

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