模板:Background：修订间差异

2026年10月8日 (四) 22:15的版本

参数说明

参数名	默认值	功能说明
image / 1	(空)	Wiki 站内上传的图片文件名（如 `Background.jpg`）
url	(空)	外部图片直链（若填写 url，则优先于 image）
opacity	0.25	浅色模式下的背景图片透明度（0.0 - 1.0）
color	(空)	浅色模式下的页面底色（如 `#f8f9fa`）
image_dark	(同浅色)	深色模式下的站内图片文件名（实现暗色下换图）
url_dark	(同浅色)	深色模式下的外部图片直链
opacity_dark	0.15	深色模式下的背景图片透明度
color_dark	(同浅色)	深色模式下的页面底色（如 `#121212`）
blur	0px	背景图片高斯模糊度（如 `4px`）

使用示例

{{Background|image=Site_BG.png|opacity=0.2|opacity_dark=0.1|color_dark=#18181b|blur=3px}}

@@ 第1行： / 第1行： @@
-<includeonly><div style="position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url({{{image}}}); background-size: {{{size|cover}}}; background-position: {{{position|center}}}; background-repeat: {{{repeat|no-repeat}}}; {{#if:{{{color|}}}|background-color: {{{color}}};}} {{#if:{{{opacity|}}}|opacity: {{{opacity}}};}}"></div></includeonly><noinclude>
+<includeonly>{{#tag:style|
-<nowiki>
+/* Citizen 皮肤背景图遮罩基础配置 */
-; 用法
+body::before {
-: {{Background|image=图片URL|color=背景色|opacity=透明度}}
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    pointer-events: none;
+    background-size: {{{size|cover}}};
+    background-position: {{{position|center}}};
+    background-repeat: {{{repeat|no-repeat}}};
+    filter: blur({{{blur|0px}}});
+    transition: opacity 0.3s ease, background-image 0.3s ease;
+}
-; 示例
+/* 浅色模式（Default / Light） */
-: {{Background|image=https://example.com/bg.jpg}}
+html,
-: {{Background|image=https://example.com/bg.jpg|opacity=0.3}}
+html.skin-citizen-light,
-: {{Background|image=https://example.com/bg.jpg|color=#0d1117|opacity=0.5}}
+html[data-theme="light"],
+html.skin-theme-clientpref-day {
+    {{#if:{{{color|}}}|background-color: {{{color}}} !important;}}
+}
-; 参数
+html body::before,
-: image — 背景图片URL（必填）
+html.skin-citizen-light body::before,
-: color — 背景颜色（可选）
+html[data-theme="light"] body::before,
-: size — 图片尺寸，默认 cover
+html.skin-theme-clientpref-day body::before {
-: position — 图片位置，默认 center
+    background-image: url("{{#if:{{{url|}}}|{{{url}}}|{{filepath:{{{image|{{{1|}}}}}}}}}");
-: repeat — 是否重复，默认 no-repeat
+    opacity: {{{opacity|0.25}}};
-: opacity — 透明度 0~1（可选）
+}
-</nowiki>
+/* 深色模式（Citizen Dark Mode） */
+html.skin-citizen-dark,
+html[data-theme="dark"],
+html.skin-theme-clientpref-night {
+    {{#if:{{{color_dark|{{{color|}}}}}}|background-color: {{{color_dark|{{{color}}}}}} !important;}}
+}
+html.skin-citizen-dark body::before,
+html[data-theme="dark"] body::before,
+html.skin-theme-clientpref-night body::before {
+    background-image: url("{{#if:{{{url_dark|}}}|{{{url_dark}}}|{{#if:{{{image_dark|}}}|{{filepath:{{{image_dark}}}}}|{{#if:{{{url|}}}|{{{url}}}|{{filepath:{{{image|{{{1|}}}}}}}}}}}}}}");
+    opacity: {{{opacity_dark|{{{opacity|0.15}}}}}};
+}
+/* 跟随系统深色模式匹配 */
+@media (prefers-color-scheme: dark) {
+    html.skin-theme-clientpref-os body::before {
+        background-image: url("{{#if:{{{url_dark|}}}|{{{url_dark}}}|{{#if:{{{image_dark|}}}|{{filepath:{{{image_dark}}}}}|{{#if:{{{url|}}}|{{{url}}}|{{filepath:{{{image|{{{1|}}}}}}}}}}}}}}");
+        opacity: {{{opacity_dark|{{{opacity|0.15}}}}}};
+    }
+    html.skin-theme-clientpref-os {
+        {{#if:{{{color_dark|{{{color|}}}}}}|background-color: {{{color_dark|{{{color}}}}}} !important;}}
+    }
+}
+}}</includeonly><noinclude>
+== 参数说明 ==
+{| class="wikitable"
+! 参数名 !! 默认值 !! 功能说明
+|-
+| image / 1 || (空) || Wiki 站内上传的图片文件名（如 `Background.jpg`）
+|-
+| url || (空) || 外部图片直链（若填写 url，则优先于 image）
+|-
+| opacity || 0.25 || 浅色模式下的背景图片透明度（0.0 - 1.0）
+|-
+| color || (空) || 浅色模式下的页面底色（如 `#f8f9fa`）
+|-
+| image_dark || (同浅色) || 深色模式下的站内图片文件名（实现暗色下换图）
+|-
+| url_dark || (同浅色) || 深色模式下的外部图片直链
+|-
+| opacity_dark || 0.15 || 深色模式下的背景图片透明度
+|-
+| color_dark || (同浅色) || 深色模式下的页面底色（如 `#121212`）
+|-
+| blur || 0px || 背景图片高斯模糊度（如 `4px`）
+|}
+== 使用示例 ==
+<pre>
+{{Background|image=Site_BG.png|opacity=0.2|opacity_dark=0.1|color_dark=#18181b|blur=3px}}
+</pre>
 </noinclude>

KK​（留言 | 贡献）

2026年10月8日 (四) 22:15的版本

参数说明

使用示例

KK（留言 | 贡献）