xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(card): 将 blur-img 规则移入 @layer components 修复封面高度

Browse Source 
上一次仅提升选择器特异性(.blur-img.post-card-cover-blur)未能生效，
根因是 CSS @layer 级联:未分层(layer 外)规则无条件覆盖分层(layer 内)
规则,与特异性无关。

.blur-img 全局规则原本在 @layer components 之外(line 644),
而卡片规则在 layer 内(line 532),导致卡片 aspect-ratio:4/3 败给
全局 var(--ar),--ar 未定义时高度場陷为 0。

将整个 blur-up 规则块(.blur-img/.blur-img-placeholder/.blur-img-full
及其 is-loaded/.dark 变体)移入 @layer components,使两条 .blur-img*
规则同层竞争,特异性 (0,2,0) > (0,1,0) 才真正生效。
This commit is contained in:
xfy 2026-06-24 15:46:24 +08:00
parent d48b32b40e
commit a9b194f3bf
1 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
input.css
View File

@ -568,6 +568,65 @@
.post-card-accent:hover::after {
width: 100%;
}
/* ========== Blur-up 渐进图片加载 ==========
放在 @layer components 内，与 .blur-img.post-card-cover-blur 同层，
这样特异性能正常生效（layer 外规则会无条件覆盖 layer 内规则，
导致卡片的 aspect-ratio:4/3 败给全局 var(--ar)）。 */
.blur-img {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--ar);
/* 加载中灰底（占位图未加载完时） */
background: var(--color-paper-code-bg, #f5f5f5);
border-radius: 6px;
margin: 1em 0;
}
.blur-img-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
margin: 0;
max-width: none;
/* 20px 占位图放大后模糊，scale 遮边缘 */
filter: blur(20px) saturate(1.2);
transform: scale(1.1);
transition: opacity 0.4s ease;
}
.blur-img-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
margin: 0;
max-width: none;
opacity: 0;
z-index: 1;
}
/* full 加载完成后由 JS 直接设 opacity:1（不依赖 CSS transition，
避免合成层重绘时机导致 opacity 卡在 0）。 */
.blur-img-full.is-loaded,
.blur-img.is-loaded .blur-img-full {
opacity: 1;
}
/* 容器标记 loaded 后：显式隐藏占位图 + 去掉灰底，避免重绘时机导致残留/灰边 */
.blur-img.is-loaded .blur-img-placeholder {
opacity: 0;
}
.blur-img.is-loaded {
background: transparent;
}
/* 暗色模式灰底 */
.dark .blur-img {
background: var(--color-paper-code-bg, #2a2a2a);
}
}
@keyframes fadeIn {
@ -640,58 +699,4 @@
}
}
/* ========== Blur-up 渐进图片加载 ========== */
.blur-img {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--ar);
/* 加载中灰底（占位图未加载完时） */
background: var(--color-paper-code-bg, #f5f5f5);
border-radius: 6px;
margin: 1em 0;
}
.blur-img-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
margin: 0;
max-width: none;
/* 20px 占位图放大后模糊，scale 遮边缘 */
filter: blur(20px) saturate(1.2);
transform: scale(1.1);
transition: opacity 0.4s ease;
}
.blur-img-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 重置 .md-content img 的 margin/max-width/height，避免把 absolute 图层推偏 */
margin: 0;
max-width: none;
opacity: 0;
z-index: 1;
}
/* full 加载完成后由 JS 直接设 opacity:1（不依赖 CSS transition，
避免合成层重绘时机导致 opacity 卡在 0）。 */
.blur-img-full.is-loaded,
.blur-img.is-loaded .blur-img-full {
opacity: 1;
}
/* 容器标记 loaded 后：显式隐藏占位图 + 去掉灰底，避免重绘时机导致残留/灰边 */
.blur-img.is-loaded .blur-img-placeholder {
opacity: 0;
}
.blur-img.is-loaded {
background: transparent;
}
/* 暗色模式灰底 */
.dark .blur-img {
background: var(--color-paper-code-bg, #2a2a2a);
}
/* ========== Blur-up 渐进图片加载（已移入 @layer components） ========== */