96 lines
2.9 KiB
CSS
96 lines
2.9 KiB
CSS
/**
|
||
* 页面背景（通用）
|
||
*
|
||
* 用法：
|
||
* <main class="aifo-page-bg aifo-page-bg--top-glow">...</main>
|
||
*
|
||
* aifo-page-bg 只负责导航间距与定位；背景光晕三选一（勿混用）：
|
||
* aifo-page-bg--top-glow 顶部全宽光晕（默认 academy 图）
|
||
* aifo-page-bg--top-left-glow 左上角光晕
|
||
* aifo-page-bg--grid 网格底纹（无光晕图）
|
||
*
|
||
* 按页覆盖 — 顶部全宽：
|
||
* #my-page { --aifo-page-bg-height: 920px; }
|
||
* #my-page { --aifo-page-bg-image: url(../images/...); }
|
||
*
|
||
* 按页覆盖 — 左上角：
|
||
* #my-page { --aifo-page-bg-top-left-top: 97px; }
|
||
* #my-page { --aifo-page-bg-top-left-image: url(../images/...); }
|
||
*
|
||
* 按页增加导航下方内容间距（不含 header 高度）：
|
||
* #my-page { --aifo-page-content-offset: 1.5rem; }
|
||
*/
|
||
:root {
|
||
/* 与 #academy-main margin-top、固定导航高度保持一致 */
|
||
--aifo-nav-height: 5.9375rem;
|
||
|
||
/* 左上角光晕（默认 top:0，配合 .aifo-page-bg 的 margin-top 对齐导航下方） */
|
||
--aifo-page-bg-top-left-top: 0;
|
||
--aifo-page-bg-top-left-left: -2vw;
|
||
--aifo-page-bg-top-left-size: min(60vw, 555px);
|
||
--aifo-page-bg-top-left-max-height: min(52vh, 485px);
|
||
--aifo-page-bg-top-left-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
:root {
|
||
/* 与 index.css #nav height、.main margin-top 保持一致 */
|
||
--aifo-nav-height: 72px;
|
||
}
|
||
}
|
||
|
||
.aifo-page-bg {
|
||
position: relative;
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: transparent;
|
||
margin-top: var(--aifo-nav-height);
|
||
padding-top: var(--aifo-page-content-offset, 0);
|
||
}
|
||
|
||
/* 顶部全宽光晕 */
|
||
.aifo-page-bg--top-glow::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: var(--aifo-page-bg-height, 805px);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
background-image: var(
|
||
--aifo-page-bg-image,
|
||
url("../images/backgrounds/academy/academy_bg_1.webp")
|
||
);
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
/* 左上角光晕 — 源自 special-offer-50；contain 完整显示 PNG，避免 cover 裁切硬边 */
|
||
.aifo-page-bg--top-left-glow::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: var(--aifo-page-bg-top-left-top);
|
||
left: var(--aifo-page-bg-top-left-left);
|
||
width: var(--aifo-page-bg-top-left-size);
|
||
height: var(--aifo-page-bg-top-left-size);
|
||
max-height: var(--aifo-page-bg-top-left-max-height);
|
||
pointer-events: none;
|
||
z-index: 3;
|
||
background: var(--aifo-page-bg-top-left-image) no-repeat left top;
|
||
background-size: contain;
|
||
}
|
||
|
||
/* 网格底纹（无光晕图） */
|
||
.aifo-page-bg--grid {
|
||
background-image: image-set(
|
||
url("../images/backgrounds/academy/bg_grid.webp") type("image/webp"),
|
||
url("../images/backgrounds/academy/bg_grid.png") type("image/png")
|
||
);
|
||
background-size: cover;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
}
|