fix(theme): 补抠封闭白区(光环/车架/轮圈内),人物与单车加渐隐遮罩

问题(用户发现):
1. 光环环内是白块 —— 此前只用「边界洪泛」抠底,被图形围起来的封闭白色
   区域(光环内圈、单车车架三角、轮圈内扇形)与边界不连通,没被处理
2. 人物与单车直接贴在页面上显得突兀

修复:
- 对三张图再补一次「封闭白色区域」清理(按面积阈值):
  人物抠 3675px(含光环 2665)、单车抠 19657px、图标抠 308px;并同步重生成 favicon
  已验证脸部 / 袜子 / 衣服等服装白未被误抠(保留 34px 噪点级)
- 立绘 opacity .92 + 上下渐隐遮罩;单车 opacity .8 + 两端渐隐 + saturate(.92)

验证:四套脚本 81 项全通过;1440 宽 0 横向溢出;局部放大确认光环内圈可透出背景
This commit is contained in:
tamakyi
2026-10-13 21:06:29 +08:00
parent fa7c708878
commit 6f9a2d33ce
18 changed files with 242 additions and 229 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
const VERSION = '0.8.2';
const VERSION = '0.8.3';
const HB_LIMIT = 48;
const UPTIME_DAYS = 90;
const BROWSER_CONCURRENCY = 6;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

+10 -2
View File
@@ -89,7 +89,11 @@ body[data-theme="shiroko"]::before {
height: 93px;
pointer-events: none;
z-index: 0;
opacity: 0.85;
/* 半透明 + 两端渐隐,弱化「一块贴图」的突兀感 */
opacity: 0.8;
filter: saturate(0.92);
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
background: url("shiroko-bike.webp") no-repeat center / contain;
}
@@ -213,7 +217,11 @@ body[data-theme="shiroko"] .artwork {
z-index: 0;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 6px 18px rgb(23 60 100 / 15%));
/* 半透明 + 上下渐隐遮罩:让它像背景插画而不是贴上去的贴纸 */
opacity: 0.92;
filter: drop-shadow(0 6px 18px rgb(23 60 100 / 12%));
mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
}
/* 窄屏:立绘与固定装饰全部撤掉,避免压住内容或溢出(手机只保留配色与围巾飘带) */
@media (max-width: 820px) {