模板:PageBanner/styles.css - 版本历史

KK：清空全部内容

2026-01-30T08:49:11Z

清空全部内容

←上一版本		2026年1月30日 (五) 16:49的版本
第1行：		第1行：
	~~/* --- 1. 暴力隐藏 Citizen 及原生标题 --- */~~
	~~/* 针对 Citizen 皮肤的特殊标题结构 */~~
	~~.citizen-page-header,~~
	~~.mw-body-header,~~
	~~header.mw-body-header,~~
	~~#firstHeading,~~
	~~.firstHeading,~~
	~~.page-heading {~~
	~~display: none !important;~~
	}

	~~/* 修正隐藏标题后顶部留出的大白条 */~~
	~~.mw-body, #content, #bodyContent {~~
	~~margin-top: 0 !important;~~
	~~padding-top: 0 !important;~~
	}

	~~/* --- 2. Banner 主容器 --- */~~
	~~.page-banner {~~
	~~position: relative;~~
	~~height: 400px; /* 稍微改小了一点，显得更紧凑 */~~
	~~width: 100%;~~
	~~/* 这里的 margin 是为了抵消 Citizen 默认的边距 */~~
	~~margin-top: -1rem;~~
	~~margin-left: 0;~~
	~~margin-right: 0;~~
	~~margin-bottom: 2rem;~~
	~~z-index: 0;~~
	~~overflow: hidden; /* 防止图片溢出 */~~
	~~border-radius: 4px; /* 给整个 Banner 一点圆角 */~~
	}

	~~/* --- 3. 背景层 (支持 [[File:...]] 语法的核心) --- */~~
	~~.page-banner-bg {~~
	~~position: absolute;~~
	~~top: 0;~~
	~~left: 0;~~
	~~width: 100%;~~
	~~height: 100%;~~
	~~z-index: -2;~~
	}

	~~/* 关键：让 wiki 插入的 img 标签撑满容器 */~~
	~~.page-banner-bg img {~~
	~~width: 100% !important;~~
	~~height: 100% !important;~~
	~~object-fit: cover !important; /* 裁剪图片以填充，不拉伸 */~~
	~~object-position: center center;~~
	}

	~~/* --- 4. 渐变遮罩层 --- */~~
	~~.page-banner-overlay {~~
	~~position: absolute;~~
	~~top: 0;~~
	~~left: 0;~~
	~~width: 100%;~~
	~~height: 100%;~~
	~~/* 渐变：顶部稍微暗一点，底部变黑以突出文字 */~~
	~~background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);~~
	~~z-index: -1;~~
	}

	~~/* --- 5. 内容层 --- */~~
	~~.page-banner-content {~~
	~~position: relative;~~
	~~height: 100%;~~
	~~width: 100%;~~
	~~box-sizing: border-box;~~
	~~display: flex;~~
	~~flex-direction: column;~~
	~~justify-content: flex-end; /* 文字沉底 */~~
	~~align-items: flex-start; /* 文字靠左 */~~
	~~padding: 2rem; /* 内边距 */~~
	~~z-index: 1;~~
	}

	~~/* --- 6. 文字样式 --- */~~
	~~.page-banner-local {~~
	~~font-family: 'Microsoft YaHei', 'SimHei', sans-serif; /* 无衬线 */~~
	~~font-size: 3.5em;~~
	~~font-weight: 900;~~
	~~color: #ffffff;~~
	~~line-height: 1.1;~~
	~~margin: 0;~~
	~~text-shadow: 0 2px 10px rgba(0,0,0,0.8);~~
	}

	~~.page-banner-en {~~
	~~font-family: sans-serif;~~
	~~font-size: 1.2em;~~
	~~font-weight: 500;~~
	~~color: rgba(255, 255, 255, 0.9);~~
	~~margin-top: 5px;~~
	~~text-transform: uppercase;~~
	~~text-shadow: 0 1px 5px rgba(0,0,0,0.8);~~
	}

2026年1月30日 (五) 08:40 KK

2026-01-30T08:40:56Z

←上一版本		2026年1月30日 (五) 16:40的版本
第1行：		第1行：
	/* --- 1. 暴力隐藏 Citizen 及原生标题 --- */		/* --- 1. 暴力隐藏 Citizen 及原生标题 --- */
			/* 针对 Citizen 皮肤的特殊标题结构 */
			.citizen-page-header,
	.mw-body-header,		.mw-body-header,
	.~~citizen~~-~~page~~-header,		header.mw-body-header,
	#firstHeading,		#firstHeading,
	.firstHeading,		.firstHeading,
	.page-heading { ~~/* 增加一个常见的 Citizen 标题类名 */~~		.page-heading {
	display: none !important;		display: none !important;
	}		}

	/* ~~修正 Citizen 顶部间距~~ */		/* 修正隐藏标题后顶部留出的大白条 */
	.mw-body, #content {		.mw-body, #content, #bodyContent {
	margin-top: 0 !important;		margin-top: 0 !important;
	padding-top: 0 !important;		padding-top: 0 !important;
第17行：		第19行：
	.page-banner {		.page-banner {
	position: relative;		position: relative;
	height: ~~450px~~;		height: 400px; /* 稍微改小了一点，显得更紧凑 */
	width: 100%;		width: 100%;
	margin-top: -~~1.5rem~~;		/* 这里的 margin 是为了抵消 Citizen 默认的边距 */
			margin-top: -1rem;
			margin-left: 0;
			margin-right: 0;
	margin-bottom: 2rem;		margin-bottom: 2rem;
	z-index: 0;		z-index: 0;
			overflow: hidden; /* 防止图片溢出 */
			border-radius: 4px; /* 给整个 Banner 一点圆角 */
	}		}

	/* --- 3. ~~背景层（全宽黑科技）~~ --- */		/* --- 3. 背景层 (支持 [[File:...]] 语法的核心) --- */
	.page-banner-bg {		.page-banner-bg {
	position: absolute;		position: absolute;
	top: 0;		top: 0;
			left: 0;
			width: 100%;
	height: 100%;		height: 100%;

	~~/* 强制全宽 */~~
	~~width: 100vw;~~
	~~left: 50%;~~
	~~margin-left: -50vw;~~

	~~background-size: cover;~~
	~~background-position: center center; /* 确保图片居中 */~~
	z-index: -2;		z-index: -2;
			}

			/* 关键：让 wiki 插入的 img 标签撑满容器 */
			.page-banner-bg img {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important; /* 裁剪图片以填充，不拉伸 */
			object-position: center center;
	}		}

第44行：		第53行：
	position: absolute;		position: absolute;
	top: 0;		top: 0;
			left: 0;
			width: 100%;
	height: 100%;		height: 100%;
			/* 渐变：顶部稍微暗一点，底部变黑以突出文字 */
	~~width: 100vw;~~		background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
	~~left: 50%;~~
	~~margin-left: -50vw;~~

	/* ~~调整了一下渐变，让文字更清晰~~ */
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, ~~var~~(~~--color-surface-1~~, ~~#ffffff~~) 100%);
	z-index: -1;		z-index: -1;
	}		}
第60行：		第66行：
	height: 100%;		height: 100%;
	width: 100%;		width: 100%;
			box-sizing: border-box;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	justify-content: flex-end;		justify-content: flex-end; /* 文字沉底 */
	align-items: flex-start;		align-items: flex-start; /* 文字靠左 */
			padding: 2rem; /* 内边距 */
	padding~~-bottom~~: ~~60px~~;
	z-index: 1;		z-index: 1;
	}		}

	/* --- 6. 文字样式 ~~(已修改为无衬线)~~ --- */		/* --- 6. 文字样式 --- */
	.page-banner-local {		.page-banner-local {
	~~/* 这里的字体栈是现代无衬线风格 */~~		font-family: 'Microsoft YaHei', 'SimHei', sans-serif; /* 无衬线 */
	font-family: ~~system-ui, -apple-system, BlinkMacSystemFont,~~ '~~Segoe UI~~'~~, Roboto~~, '~~Microsoft YaHei~~', sans-serif;		font-size: 3.5em;
	font-size: ~~4em~~;
	font-weight: 900;		font-weight: 900;
	color: #ffffff;		color: #ffffff;
	line-height: 1.1;		line-height: 1.1;
	margin: 0;		margin: 0;
	~~/* 增加文字阴影，防止背景太白看不清 */~~		text-shadow: 0 2px 10px rgba(0,0,0,0.8);
	text-shadow: 0 ~~4px 20px~~ rgba(0,0,0,0.5);
	}		}

	.page-banner-en {		.page-banner-en {
	font-family: ~~system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,~~ sans-serif;		font-family: sans-serif;
	font-size: 1.~~5em~~;		font-size: 1.2em;
	font-weight: 500;		font-weight: 500;
	color: rgba(255, 255, 255, 0.9);		color: rgba(255, 255, 255, 0.9);
	margin-top: ~~8px;~~		margin-top: 5px;
	~~letter-spacing: 1px~~;
	text-transform: uppercase;		text-transform: uppercase;
	text-shadow: 0 ~~2px 10px~~ rgba(0,0,0,0.7);		text-shadow: 0 1px 5px rgba(0,0,0,0.8);
	}

	~~/* 移动端适配 */~~
	~~@media screen and (max-width: 720px) {~~
	~~.page-banner { height: 300px; }~~
	~~.page-banner-local { font-size: 2.5em; }~~
	~~.page-banner-en { font-size: 1.1em; }~~
	}		}

2026年1月30日 (五) 08:34 KK

2026-01-30T08:34:19Z

←上一版本		2026年1月30日 (五) 16:34的版本
第1行：		第1行：
	/* --- 1. 暴力隐藏 Citizen ~~各类原生标题~~ --- */		/* --- 1. 暴力隐藏 Citizen 及原生标题 --- */
	.mw-body-header,		.mw-body-header,
	.citizen-page-header,		.citizen-page-header,
	#firstHeading,		#firstHeading,
	.firstHeading {		.firstHeading,
			.page-heading { /* 增加一个常见的 Citizen 标题类名 */
	display: none !important;		display: none !important;
	}		}

	/* 修正 Citizen ~~顶部间距，让 Banner 顶上去~~ */		/* 修正 Citizen 顶部间距 */
	.mw-body, #content {		.mw-body, #content {
	margin-top: 0 !important;		margin-top: 0 !important;
第16行：		第17行：
	.page-banner {		.page-banner {
	position: relative;		position: relative;
	height: 450px; ~~/* 你想要的高度 */~~		height: 450px;
	width: 100%;		width: 100%;
	margin-top: -1.5rem; ~~/* 抵消默认 padding */~~		margin-top: -1.5rem;
	margin-bottom: 2rem;		margin-bottom: 2rem;
	z-index: 0;		z-index: 0;
	~~overflow: visible; /* 关键：允许子元素超出容器 */~~
	}		}

	/* --- 3. ~~背景层（负责全宽和图片）~~ --- */		/* --- 3. 背景层（全宽黑科技） --- */
	.page-banner-bg {		.page-banner-bg {
	position: absolute;		position: absolute;
第30行：		第30行：
	height: 100%;		height: 100%;

	/* ~~=== 核心修复：强制全宽逃逸 ===~~ */		/* 强制全宽 */
	width: 100vw;		width: 100vw;
	left: 50%;		left: 50%;
	margin-left: -50vw;		margin-left: -50vw;
	~~/* 如果出现横向滚动条，可以尝试改成 width: 99.5vw 或 100% */~~

	background-size: cover;		background-size: cover;
	background-position: center;		background-position: center center; /* 确保图片居中 */
	z-index: -2; ~~/* 最底层 */~~		z-index: -2;
	}		}

	/* --- 4. ~~渐变遮罩层（修复透明渐变）~~ --- */		/* --- 4. 渐变遮罩层 --- */
	.page-banner-overlay {		.page-banner-overlay {
	position: absolute;		position: absolute;
第47行：		第46行：
	height: 100%;		height: 100%;

	~~/* 同样应用全宽逃逸逻辑 */~~
	width: 100vw;		width: 100vw;
	left: 50%;		left: 50%;
	margin-left: -50vw;		margin-left: -50vw;

	/* ~~线性渐变：上部透明 -> 底部变为网页背景色 */~~		/* 调整了一下渐变，让文字更清晰 */
	~~/* var(--color-surface-1) 是 Citizen 的背景色变量，自动适配深色模式~~ */		background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, var(--color-surface-1, #ffffff) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, var(--color-surface-1, #ffffff) 100%);		z-index: -1;
	z-index: -1; ~~/* 在图片之上，文字之下 */~~
	}		}

	/* --- 5. ~~内容层（负责文字对齐）~~ --- */		/* --- 5. 内容层 --- */
	.page-banner-content {		.page-banner-content {
	position: relative;		position: relative;
	height: 100%;		height: 100%;
	width: 100%; ~~/* 限制在正文区域宽度内 */~~		width: 100%;

	~~/* 左对齐布局 */~~
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	justify-content: flex-end; ~~/* 沉底 */~~		justify-content: flex-end;
	align-items: flex-start; ~~/* 靠左 */~~		align-items: flex-start;

	padding-bottom: 60px; ~~/* 底部留白 */~~		padding-bottom: 60px;
	z-index: 1;		z-index: 1;
	}		}

	/* --- 6. 文字样式 --- */		/* --- 6. 文字样式 (已修改为无衬线) --- */
	.page-banner-local {		.page-banner-local {
	font-family: '~~Linux Libertine~~', '~~Georgia~~', serif;		/* 这里的字体栈是现代无衬线风格 */
			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
	font-size: 4em;		font-size: 4em;
	font-weight: 900;		font-weight: 900;
	color: #ffffff; ~~/* 强制白色 */~~		color: #ffffff;
	line-height: 1.1;		line-height: 1.1;
	margin: 0;		margin: 0;
	text-shadow: 0 4px ~~15px~~ rgba(0,0,0,0.6);		/* 增加文字阴影，防止背景太白看不清 */
			text-shadow: 0 4px 20px rgba(0,0,0,0.5);
	}		}

	.page-banner-en {		.page-banner-en {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 1.5em;		font-size: 1.5em;
	font-weight: 500;		font-weight: 500;
	color: rgba(255, 255, 255, 0.85);		color: rgba(255, 255, 255, 0.9);
	margin-top: 8px;		margin-top: 8px;
	letter-spacing: 1px;		letter-spacing: 1px;
	text-transform: uppercase;		text-transform: uppercase;
	text-shadow: 0 2px ~~5px~~ rgba(0,0,0,0.8);		text-shadow: 0 2px 10px rgba(0,0,0,0.7);
	}		}

2026年1月30日 (五) 08:30 KK

2026-01-30T08:30:29Z

←上一版本		2026年1月30日 (五) 16:30的版本
第1行：		第1行：
	/* --- 1. 隐藏 Citizen ~~原生标题~~ --- */		/* --- 1. 暴力隐藏 Citizen 各类原生标题 --- */
	.mw-body-header {		.mw-body-header,
			.citizen-page-header,
			#firstHeading,
			.firstHeading {
	display: none !important;		display: none !important;
			}

			/* 修正 Citizen 顶部间距，让 Banner 顶上去 */
			.mw-body, #content {
			margin-top: 0 !important;
			padding-top: 0 !important;
	}		}

第7行：		第16行：
	.page-banner {		.page-banner {
	position: relative;		position: relative;
	/* 高度 */		height: 450px; /* 你想要的高度 */
	~~height~~: ~~450px~~;		width: 100%;
	~~/* 抵消顶部边距 */~~		margin-top: -1.5rem; /* 抵消默认 padding */
	margin-top: -1.5rem;
	margin-bottom: 2rem;		margin-bottom: 2rem;
	z-index: 1;		z-index: 0;
			overflow: visible; /* 关键：允许子元素超出容器 */
	}		}

	/* --- 3. ~~背景层（修正版）~~ --- */		/* --- 3. 背景层（负责全宽和图片） --- */
	.page-banner-bg {		.page-banner-bg {
	position: absolute;		position: absolute;
第21行：		第30行：
	height: 100%;		height: 100%;

	/* ~~逃逸逻辑：撑满屏幕~~ */		/* === 核心修复：强制全宽逃逸 === */
	width: 100vw;		width: 100vw;
	left: 50%;		left: 50%;
	~~right: 50%;~~		margin-left: -50vw;
	margin-left: -50vw;		/* 如果出现横向滚动条，可以尝试改成 width: 99.5vw 或 100% */
	~~margin-right~~: ~~-50vw;~~

	background-size: cover;		background-size: cover;
	background-position: center;		background-position: center;
	z-index: -1;		z-index: -2; /* 最底层 */
	}		}

	/* ~~=== 核心修复：用伪元素模拟“渐隐遮罩” === */~~		/* --- 4. 渐变遮罩层（修复透明渐变） --- */
	~~/* 这一层盖在图片上，从透明渐变到页面背景色~~ */		.page-banner-overlay {
	.page-banner-~~bg::after~~ {
	~~content: "";~~
	position: absolute;		position: absolute;
	top: 0;		top: 0;
	~~left: 0;~~
	~~width: 100%;~~
	height: 100%;		height: 100%;
	/* ~~Citizen 皮肤变量：~~--~~color-surface~~-~~1 是正文背景色~~ */
	/* ~~意思是：上部透明，下部渐变到背景色，实现“融入”效果~~ */		/* 同样应用全宽逃逸逻辑 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, var(--color-surface-1, #ffffff) 100%);		width: 100vw;
			left: 50%;
			margin-left: -50vw;

			/* 线性渐变：上部透明 -> 底部变为网页背景色 */
			/* var(--color-surface-1) 是 Citizen 的背景色变量，自动适配深色模式 */
			background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, var(--color-surface-1, #ffffff) 100%);
			z-index: -1; /* 在图片之上，文字之下 */
	}		}

	/* --- 4. ~~内容层~~ --- */		/* --- 5. 内容层（负责文字对齐） --- */
	.page-banner-content {		.page-banner-content {
	position: relative;		position: relative;
	height: 100%;		height: 100%;
	~~max-~~width: 100%;		width: 100%; /* 限制在正文区域宽度内 */

			/* 左对齐布局 */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	justify-content: flex-end; /* 靠下 */		justify-content: flex-end; /* 沉底 */
	align-items: flex-start; /* 靠左 */		align-items: flex-start; /* 靠左 */

	padding-bottom: ~~80px~~;		padding-bottom: 60px; /* 底部留白 */
	z-index: 2;		z-index: 1;
	}		}

	/* --- 5. 文字样式 --- */		/* --- 6. 文字样式 --- */
	.page-banner-local {		.page-banner-local {
	font-family: 'Linux Libertine', 'Georgia', serif;		font-family: 'Linux Libertine', 'Georgia', serif;
	font-size: 4em;		font-size: 4em;
	font-weight: 900;		font-weight: 900;
	color: #ffffff;		color: #ffffff; /* 强制白色 */
	line-height: 1.1;		line-height: 1.1;
	margin: 0;		margin: 0;
	~~/* 加强阴影，防止在浅色图上看不清 */~~		text-shadow: 0 4px 15px rgba(0,0,0,0.6);
	text-shadow: 0 4px 15px rgba(0,0,0,0.8);
	}		}

	.page-banner-en {		.page-banner-en {
	font-family: sans-serif;		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 1.~~8em~~;		font-size: 1.5em;
	font-weight: ~~300~~;		font-weight: 500;
	color: rgba(255, 255, 255, 0.95);		color: rgba(255, 255, 255, 0.85);
	margin-top: ~~5px~~;		margin-top: 8px;
	letter-spacing: ~~2px~~;		letter-spacing: 1px;
	text-transform: uppercase;		text-transform: uppercase;
	text-shadow: 0 2px 5px rgba(0,0,0,0.9);		text-shadow: 0 2px 5px rgba(0,0,0,0.8);
	}		}

第89行：		第100行：
	.page-banner { height: 300px; }		.page-banner { height: 300px; }
	.page-banner-local { font-size: 2.5em; }		.page-banner-local { font-size: 2.5em; }
	.page-banner-en { font-size: 1.~~2em~~; }		.page-banner-en { font-size: 1.1em; }
	}		}

2026年1月30日 (五) 08:27 KK

2026-01-30T08:27:12Z

←上一版本		2026年1月30日 (五) 16:27的版本
第1行：		第1行：
	/* --- 1. ~~暴力隐藏~~ Citizen ~~自带的页面标题~~ --- */		/* --- 1. 隐藏 Citizen 原生标题 --- */
	~~/* 只要用了这个模板，原来的标题就会消失~~ */
	.mw-body-header {		.mw-body-header {
	display: none !important;		display: none !important;
	}		}

	/* --- 2. ~~PageBanner 容器~~ --- */		/* --- 2. Banner 主容器 --- */
	.page-banner {		.page-banner {
	/* ~~核心：用负边距抵消 Citizen 的内边距，强制全宽~~ */		position: relative;
	margin: -1.5rem -1.~~5rem 2rem~~ -1.~~5rem~~;		/* 高度 */
			height: 450px;
			/* 抵消顶部边距 */
			margin-top: -1.5rem;
			margin-bottom: 2rem;
			z-index: 1;
			}

			/* --- 3. 背景层（修正版） --- */
			.page-banner-bg {
			position: absolute;
			top: 0;
			height: 100%;

	/* ~~高度：霸气一点，默认 450px 或屏幕的一半~~ */		/* 逃逸逻辑：撑满屏幕 */
	~~height~~: ~~50vh~~;		width: 100vw;
	~~min~~-~~height~~: ~~400px~~;		left: 50%;
			right: 50%;
			margin-left: -50vw;
			margin-right: -50vw;

	~~position: relative;~~
	background-size: cover;		background-size: cover;
	background-position: ~~center~~ center;		background-position: center;
			z-index: -1;
	~~/* 弹性布局：让文字水平垂直居中 */~~
	~~display: flex;~~
	~~flex-direction: column;~~
	~~align-items: center;~~
	~~justify~~-~~content: center;~~

	~~overflow~~: ~~hidden;~~
	~~border~~-~~radius: 0 0 8px 8px~~; ~~/* 底部给点圆角，看着舒服 */~~
	}		}

	/* ~~--- 3. 黑色遮罩 (保证白字看得清) ---~~ */		/* === 核心修复：用伪元素模拟“渐隐遮罩” === */
	.page-banner-~~mask~~ {		/* 这一层盖在图片上，从透明渐变到页面背景色 */
			.page-banner-bg::after {
			content: "";
	position: absolute;		position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;		top: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, ~~rgba~~(~~0,0~~,~~0,0.6~~) 100%);		left: 0;
	~~z-index: 1~~;		width: 100%;
			height: 100%;
			/* Citizen 皮肤变量：--color-surface-1 是正文背景色 */
			/* 意思是：上部透明，下部渐变到背景色，实现“融入”效果 */
			background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, var(--color-surface-1, #ffffff) 100%);
	}		}

	/* --- 4. ~~文字内容~~ --- */		/* --- 4. 内容层 --- */
	.page-banner-~~text~~ {		.page-banner-content {
	position: relative;		position: relative;
			height: 100%;
			max-width: 100%;

			display: flex;
			flex-direction: column;
			justify-content: flex-end; /* 靠下 */
			align-items: flex-start; /* 靠左 */

			padding-bottom: 80px;
	z-index: 2;		z-index: 2;
	~~text-align: center;~~
	~~width: 90%;~~
	~~color: #fff;~~
	~~text-shadow: 0 4px 8px rgba(0,0,0,0.8);~~
	}		}

	/* ~~大标题 (对应你要求的当地语言名称)~~ */		/* --- 5. 文字样式 --- */
	.page-banner-~~title~~ {		.page-banner-local {
	font-size: ~~3.5rem~~;		font-family: 'Linux Libertine', 'Georgia', serif;
	font-weight: ~~800~~;		font-size: 4em;
	line-height: 1.2;		font-weight: 900;
	~~font-family: 'Linux Libertine', 'Georgia', serif; /* 衬线体才有史诗感 */~~		color: #ffffff;
			line-height: 1.1;
	margin: 0;		margin: 0;
			/* 加强阴影，防止在浅色图上看不清 */
			text-shadow: 0 4px 15px rgba(0,0,0,0.8);
			}

			.page-banner-en {
			font-family: sans-serif;
			font-size: 1.8em;
			font-weight: 300;
			color: rgba(255, 255, 255, 0.95);
			margin-top: 5px;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-shadow: 0 2px 5px rgba(0,0,0,0.9);
	}		}

	/* ~~适配手机~~ */		/* 移动端适配 */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.page-banner { ~~margin~~: -~~1rem~~ -~~1rem 1.5rem~~ -~~1rem; height~~: ~~35vh~~; }		.page-banner { height: 300px; }
	.page-banner-~~title~~ { font-size: 2.~~2rem~~; }		.page-banner-local { font-size: 2.5em; }
			.page-banner-en { font-size: 1.2em; }
	}		}

2026年1月30日 (五) 08:20 KK

2026-01-30T08:20:40Z

←上一版本		2026年1月30日 (五) 16:20的版本
第1行：		第1行：
	/* --- 1. ~~隐藏原生页面标题~~ --- */		/* --- 1. 暴力隐藏 Citizen 自带的页面标题 --- */
	/* ~~只要使用了这个模板，页面原本的标题栏就会消失~~ */		/* 只要用了这个模板，原来的标题就会消失 */
	.mw-body-header {		.mw-body-header {
	display: none !important;		display: none !important;
	}		}

	/* --- 2. ~~Hero Banner~~ 容器 --- */		/* --- 2. PageBanner 容器 --- */
	.~~citizen~~-~~hero~~ {		.page-banner {
	/* ~~关键：使用负边距抵消~~ Citizen ~~默认的内容内边距，实现“全宽” */~~		/* 核心：用负边距抵消 Citizen 的内边距，强制全宽 */
	~~/* 注意：如果你的 Citizen 版本不同，可能需要微调 -1.5rem 这个数值~~ */		margin: -1.5rem -1.5rem 2rem -1.5rem;
	margin~~-top~~: -1.5rem;
	~~margin-left:~~ -1.5rem;
	~~margin-right:~~ -1.5rem;

	/* ~~高度设置：默认占屏幕高度的 55%，保证冲击力~~ */		/* 高度：霸气一点，默认 450px 或屏幕的一半 */
	height: ~~55vh~~;		height: 50vh;
	min-height: 400px;		min-height: 400px;

第20行：		第17行：
	background-size: cover;		background-size: cover;
	background-position: center center;		background-position: center center;
	~~background-repeat: no-repeat;~~

	/* ~~弹性布局：让文字死死地居中~~ */		/* 弹性布局：让文字水平垂直居中 */
	display: flex;		display: flex;
			flex-direction: column;
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;

	~~/* 底部留点白，别让正文贴着图 */~~
	~~margin-bottom: 2rem;~~

	~~/* 圆角处理：如果你喜欢直角就设为0 */~~
	~~border-radius: 0 0 4px 4px;~~
	overflow: hidden;		overflow: hidden;
			border-radius: 0 0 8px 8px; /* 底部给点圆角，看着舒服 */
	}		}

	/* --- 3. ~~视觉遮罩~~ (~~Overlay~~) --- */		/* --- 3. 黑色遮罩 (保证白字看得清) --- */
	~~/* 加一层半透明黑，防止背景太花看不清字~~ */		.page-banner-mask {
	.~~citizen~~-~~hero::before~~ {
	~~content: '';~~
	position: absolute;		position: absolute;
	top: 0; left: 0; ~~right~~: 0; ~~bottom~~: 0;		top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.25); /* 0.~~25 是透明度，可自己改 */~~		background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
	z-index: 1;		z-index: 1;
	}		}

	/* --- 4. ~~只有大标题~~ --- */		/* --- 4. 文字内容 --- */
	.~~citizen~~-~~hero~~-text {		.page-banner-text {
	position: relative;		position: relative;
	z-index: 2; ~~/* 保证文字在遮罩上面 */~~		z-index: 2;
	text-align: center;		text-align: center;
	~~padding~~: ~~0 20px~~;		width: 90%;
	~~width~~: ~~100%~~;		color: #fff;
			text-shadow: 0 4px 8px rgba(0,0,0,0.8);
	}		}

	~~.citizen-hero h1 {~~		/* 大标题 (对应你要求的当地语言名称) */
	~~color: #ffffff;~~		.page-banner-title {
	/* ~~选用衬线体更有“国家/历史”的厚重感~~ */		font-size: 3.5rem;
	~~font~~-~~family: 'Linux Libertine', 'Georgia', serif;~~		font-weight: 800;
	font-size: ~~4rem~~; ~~/* 字号巨大 */~~
	font-weight: ~~700~~;
	line-height: 1.2;		line-height: 1.2;
			font-family: 'Linux Libertine', 'Georgia', serif; /* 衬线体才有史诗感 */
	margin: 0;		margin: 0;
	~~padding: 0;~~
	~~border: none;~~
	~~text-shadow: 0 4px 12px rgba(0,0,0,0.6); /* 强阴影，提升易读性 */~~
	~~letter-spacing: 0.05em;~~
	}		}

	/* ~~--- 5. 移动端适配 ---~~ */		/* 适配手机 */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	.~~citizen~~-~~hero~~ {		.page-banner { margin: -1rem -1rem 1.5rem -1rem; height: 35vh; }
	~~height: 40vh; /* 手机上矮一点 */~~		.page-banner-title { font-size: 2.2rem; }
	margin~~-left~~: -1rem~~; /* 手机版 Citizen padding 通常变小 */~~
	~~margin~~-~~right:~~ -1rem;
	}
	.~~citizen~~-~~hero h1~~ {
	font-size: 2.~~5rem~~; ~~/* 手机上字号减小 */~~
	}
	}		}

2026年1月30日 (五) 08:18 KK

2026-01-30T08:18:56Z

←上一版本		2026年1月30日 (五) 16:18的版本
第1行：		第1行：
	/* Banner 容器 */		/* --- 1. 隐藏原生页面标题 --- */
	.~~page~~-~~banner~~ {		/* 只要使用了这个模板，页面原本的标题栏就会消失 */
			.mw-body-header {
			display: none !important;
			}

			/* --- 2. Hero Banner 容器 --- */
			.citizen-hero {
			/* 关键：使用负边距抵消 Citizen 默认的内容内边距，实现“全宽” */
			/* 注意：如果你的 Citizen 版本不同，可能需要微调 -1.5rem 这个数值 */
			margin-top: -1.5rem;
			margin-left: -1.5rem;
			margin-right: -1.5rem;

			/* 高度设置：默认占屏幕高度的 55%，保证冲击力 */
			height: 55vh;
			min-height: 400px;

	position: relative;		position: relative;
	~~width~~: ~~100%~~;		background-size: cover;
	~~height~~: ~~300px~~; /* ~~横幅高度，可根据喜好调整~~ */		background-position: center center;
	margin-~~top~~: ~~-1.5rem~~; /* ~~抵消 Citizen 默认的边距，让它贴顶~~ */		background-repeat: no-repeat;

			/* 弹性布局：让文字死死地居中 */
			display: flex;
			align-items: center;
			justify-content: center;

			/* 底部留点白，别让正文贴着图 */
			margin-bottom: 2rem;

			/* 圆角处理：如果你喜欢直角就设为0 */
			border-radius: 0 0 4px 4px;
	overflow: hidden;		overflow: hidden;
	~~display: flex;~~
	~~align-items: flex-end; /* 文字对齐到底部 */~~
	~~background-color: #333;~~
	}		}

	/* ~~背景图片~~ */		/* --- 3. 视觉遮罩 (Overlay) --- */
	.~~page~~-~~banner-image~~ {		/* 加一层半透明黑，防止背景太花看不清字 */
			.citizen-hero::before {
			content: '';
	position: absolute;		position: absolute;
	top: 0;		top: 0; left: 0; right: 0; bottom: 0;
	left: 0;		background: rgba(0, 0, 0, 0.25); /* 0.25 是透明度，可自己改 */
	~~width~~: ~~100%~~;
	~~height~~: ~~100%~~;
	~~object-fit~~: ~~cover~~;
	z-index: 1;		z-index: 1;
	}		}

	/* ~~渐变遮罩，确保文字清晰~~ */		/* --- 4. 只有大标题 --- */
	.~~page~~-~~banner~~-~~overlay~~ {		.citizen-hero-text {
	position: ~~absolute~~;		position: relative;
	~~top~~: 0;		z-index: 2; /* 保证文字在遮罩上面 */
	~~left~~: 0;		text-align: center;
			padding: 0 20px;
	width: 100%;		width: 100%;
	~~height: 100%;~~
	~~background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);~~
	~~z-index: 2;~~
	}

	~~/* 文字容器 */~~
	~~.page-banner-content {~~
	~~position: relative;~~
	~~z-index: 3;~~
	~~padding: 20px 40px;~~
	~~color: white;~~
	~~text-shadow: 2px 2px 4px rgba(0,0,0,0.5);~~
	}		}

	.~~page~~-~~banner~~-~~title {~~		.citizen-hero h1 {
	font-size: ~~2.5rem~~;		color: #ffffff;
	font-weight: ~~bold~~;		/* 选用衬线体更有“国家/历史”的厚重感 */
			font-family: 'Linux Libertine', 'Georgia', serif;
			font-size: 4rem; /* 字号巨大 */
			font-weight: 700;
			line-height: 1.2;
	margin: 0;		margin: 0;
			padding: 0;
			border: none;
			text-shadow: 0 4px 12px rgba(0,0,0,0.6); /* 强阴影，提升易读性 */
			letter-spacing: 0.05em;
	}		}

	.~~page~~-~~banner~~-~~subtitle {~~		/* --- 5. 移动端适配 --- */
	~~font~~-~~size: 1.1rem;~~		@media screen and (max-width: 720px) {
	~~opacity: 0.9;~~		.citizen-hero {
	}		height: 40vh; /* 手机上矮一点 */
			margin-left: -1rem; /* 手机版 Citizen padding 通常变小 */
	~~/* 适配移动端~~ */		margin-right: -1rem;
	@media (max-width: 720px) {		}
	.~~page~~-~~banner~~ { height: ~~200px~~; }		.citizen-hero h1 {
	.~~page-banner~~-~~title~~ { font-size: 1.~~8rem~~; }		font-size: 2.5rem; /* 手机上字号减小 */
			}
	}		}

KK：创建页面，内容为“/* Banner 容器 / .page-banner { position: relative; width: 100%; height: 300px; / 横幅高度，可根据喜好调整 / margin-top: -1.5rem; / 抵消 Citizen 默认的边距，让它贴顶 / overflow: hidden; display: flex; align-items: flex-end; / 文字对齐到底部 / background-color: #333; } / 背景图片 */ .page-banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%;…”

2026-01-30T08:13:44Z

创建页面，内容为“Banner 容器： .page-banner { position: relative; width: 100%; height: 300px; 横幅高度，可根据喜好调整： margin-top: -1.5rem; 抵消 Citizen 默认的边距，让它贴顶： overflow: hidden; display: flex; align-items: flex-end; 文字对齐到底部： background-color: #333; } 背景图片： .page-banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%;…”

新页面

/* Banner 容器 */
.page-banner {
position: relative;
width: 100%;
height: 300px; /* 横幅高度，可根据喜好调整 */
margin-top: -1.5rem; /* 抵消 Citizen 默认的边距，让它贴顶 */
overflow: hidden;
display: flex;
align-items: flex-end; /* 文字对齐到底部 */
background-color: #333;
}

/* 背景图片 */
.page-banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

/* 渐变遮罩，确保文字清晰 */
.page-banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
z-index: 2;
}

/* 文字容器 */
.page-banner-content {
position: relative;
z-index: 3;
padding: 20px 40px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.page-banner-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
}

.page-banner-subtitle {
font-size: 1.1rem;
opacity: 0.9;
}

/* 适配移动端 */
@media (max-width: 720px) {
.page-banner { height: 200px; }
.page-banner-title { font-size: 1.8rem; }
}