|
|
| 第1行： |
第1行： |
| <includeonly>{{#tag:style| | | <templatestyles src="Template:Background/styles.css"/><div |
| /* Citizen 皮肤背景图遮罩基础配置 */ | | class="background-container" |
| body::before {
| | style=" |
| content: "";
| | --background-image: url('{{filepath:{{{image|}}}}}'); |
| position: fixed;
| | --background-opacity: {{{opacity|1}}}; |
| top: 0;
| | --background-color: {{{color|transparent}}}; |
| 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-dark-image: url('{{filepath:{{{dark-image|{{{image|}}}}}}}}'); |
| html,
| | --background-dark-opacity: {{{dark-opacity|{{{opacity|1}}}}}}; |
| html.skin-citizen-light,
| | --background-dark-color: {{{dark-color|{{{color|transparent}}}}}}; |
| html[data-theme="light"],
| | "></div> |
| 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> | |
