查看“︁模板:Background”︁的源代码

<includeonly>{{#tag:style|
/* Citizen 皮肤背景图遮罩基础配置 */
body::before {
    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） */
html,
html.skin-citizen-light,
html[data-theme="light"],
html.skin-theme-clientpref-day {
    {{#if:{{{color|}}}|background-color: {{{color}}} !important;}}
}

html body::before,
html.skin-citizen-light body::before,
html[data-theme="light"] body::before,
html.skin-theme-clientpref-day body::before {
    background-image: url("{{#if:{{{url|}}}|{{{url}}}|{{filepath:{{{image|{{{1|}}}}}}}}}");
    opacity: {{{opacity|0.25}}};
}

/* 深色模式（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>