用法
- 必选项,选择一下之一
- 新旧黑标:二选一,只用保留 old 或 new 一栏。
- sigma-swap:基金会的默认版式,填此可以使用基于sigma9的基金会版式。
- wanderers:被放逐者之图书馆的护封版式。
- 可选项,不填则不开启。
- 版头居中: |mid=true
- 折叠侧边栏: |sidebar=true
- 版头标题文本:注意文本要用半角双引号括起来。
ps:后室旧黑标部分移植新黑标效果,可与后室版式叠加,详情见此。
示例
[[include :etinjat:backrooms:fit-bhl
|old=true
|new=true
|sigma-swap=true
|wanderers=true
|mid=true
|sidebar=true
|header-title="版头大标题文本"
|header-subtitle="版头次标题文本"
|mob-title="手机下的版头大标题文本"
|mob-subtitle="手机下版头次标题文本"
|logo-image=url('标志图片地址')
]]
这里插入SCP的版式
快速复制用
[[include :etinjat:backrooms:fit-bhl
|new=true
|mid=true
|sidebar=true
]]
这里插入SCP的黑标版式
PS:插入的黑标版式不需要再额外复制这代码
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
侧边栏图片修复组件
- 可以不引用黑标,而是单纯地令侧边栏图标颜色,随着后室现有版式颜色而变化。
- 新旧黑标都已嵌入使用。
[[include :etinjat:backrooms:fit-bhl
|sidebar-icon=true
|sidebar-icon-bg=url('xxxxxxx') //选填,填入衬图图片地址
|sidebar-icon-color= xxxx //选填,填入颜色代码
]]
注意,由于本组件使用了mask代码,如果你在其他地方使用而导致图标缺失的话,请把图标上传到像这个支持https的图库,然后再修改以下变量,从01~09分别是自左数起的图标:
:root{
—sidebar-01-icon: url('图标地址');
}
图标数据:
后室侧边栏图标数据
新黑标 - 后室调整图标数据(底部按钮)
/*===================== 黑标适配后室的根元素 11111111111111111111111 =====================*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap'); @import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); :root, :root:lang(cn){ --header-title:"Backrooms"; --header-subtitle:"你曾来过此处"; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); --topbar-height-on-mobile:2rem; --logo-image: var(--backrooms-image); --body-font: 'Roboto Slab', Inter, 'IBM Plex Mono', proxima-nova, 'Noto Sans TC', 'Noto Sans SC', '微软雅黑', '等线', sans-serif; --header-font: 'IBM Plex Mono', 'Noto Sans TC', 'Noto Sans SC', 'Roboto Slab', '微软雅黑', '等线', sans-serif; --title-font: 'Noto Serif TC', 'Noto Serif SC', '华文中宋', 'Roboto Slab', monospace; --mono-font: 'IBM Plex Mono', 'Ubuntu Mono', 'Fantasque Sans Mono', 'ZCOOL XiaoWei', '仿宋', 'LXGW WenKai', 'Noto Serif TC', 'Noto Serif SC', '微软雅黑', '等线', 'Roboto Slab', monospace; } /* ===================== 主体 ===================== */ #header h1 a, #header h2 span { letter-spacing: 2px; } #header h1 { top:0.2rem; } #header h2 { top: 0.1rem; } /*------------- 侧栏 -------------------*/ #side-bar .side-block{ margin-top: -0.1rem; } #side-bar .heading .menu-item{ margin-left: 0 !important; } #side-bar .heading .menu-item a:before { transform: translateX(calc(-100% - 8rem)); } #side-bar .heading .menu-item a:hover:before { transform: translateX(-8rem) } #side-bar div.menu-item.small a { justify-content: center; width: auto; padding: 0 0.25em; text-indent: 0; white-space: nowrap; } #side-bar div.menu-item a { justify-content: flex-start; padding: 0 0 0 calc(var(--base-font-size)*.93333); } #side-bar div.menu-item, #side-bar div.menu-item>p { display: flex; flex-shrink: 0; flex-basis: 100%; flex-flow: row wrap; align-items: center; justify-content: flex-start; height: 1.5rem; min-height: 1.5rem; margin: 0; padding: 0; box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness)*-1) 0 0 rgba(var(--sidebar-border-color)); font-size: 0; } #side-bar div.menu-item>:last-child { flex-grow: 2; } #side-bar div.menu-item a:not(a:first-child) { border-left: var(--sidebar-internal-border-thickness) solid rgba(var(--swatch-border-color), .08) } #side-bar div.scpnet-interwiki-wrapper { min-height: 300px; } .thread-container .post .long .content .image:not(.collapsible-block .image) { object-fit: cover; max-height: 2em; width: 100%; transition: max-height 0.5s; } .thread-container .post .long .content .image:hover:not(.collapsible-block .image) { max-height: 100em; } div.scpnet-interwiki-wrapper { margin: 0; width: auto; } iframe.scpnet-interwiki-frame { border: inherit; width: 100%; height: 230px; } @media (min-width:768px) { div.scpnet-interwiki-wrapper, iframe.scpnet-interwiki-frame { width: 100%; } } /* ====================================== 引用块 ====================================== */ blockquote { box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .styled-quote { background-color:rgb(var(--pale-gray-monochrome)); border-left: 0.5rem solid rgba(var(--gray-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote { background-color:rgb(var(--gray-monochrome)); border-left: 0.5rem solid rgba(var(--pale-gray-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote a{ color: rgb(var(--swatch-menubg-medium-color)); } .lightblock { background-color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock { background-color:rgb(var(--gray-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock a { color: rgb(var(--swatch-menubg-medium-color)); } .dark-styled-quote a{ color: rgb(var(--swatch-menubg-medium-color)); } .borderblock { background-color:rgb(var( --gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--bright-accent)); } .alt-borderblock { background-color:rgb(var(--bright-accent)); color:rgb(var(--black-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--gray-monochrome)); } .dark-borderblock { background-color:rgb(var( --darker-legacy-accent)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--legacy-accent)); } .border-logoblock{ padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color:rgb(255, 255, 255); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--gray-monochrome)); border: solid 0.3rem rgb(var(--bright-accent)); } .border-logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: var(--meg-image) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .dark-border-logoblock{ padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color:rgb(255, 255, 255); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--darker-legacy-accent)); border: solid 0.3rem rgb(var(--legacy-accent)); } .dark-border-logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: var(--meg-image) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .logoblock{ padding: 0.01rem 1rem; color:rgb(255, 255, 255); box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--gray-monochrome)); } .logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: var(--meg-image) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .dark-logoblock{ padding: 0.01rem 1rem; color:rgb(255, 255, 255); box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--darker-legacy-accent)); } .dark-logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: var(--meg-image) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .titleblock { background-color: rgb(var(--gray-monochrome)); color:rgb(var(--text-white-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); border: solid rgb(var(--bright-accent)) 2px; } .titlebox{ color: rgb(var(--gray-monochrome)); position: relative; top: -1.6rem; background-color: rgb(var(--bright-accent)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-titleblock { background-color: rgb(var(--darker-legacy-accent)); color:rgb(var(--text-white-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); border: solid rgb(var(--legacy-accent)) 2px; } .dark-titlebox{ color: rgb(var(--darker-legacy-accent)); position: relative; top: -1.6rem; background-color: rgb(var(--legacy-accent)); padding: 0.25rem 1rem; line-height: 0.1rem; } .border-block { background-color:rgb(var(--gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--gray-monochrome)); }
/*===================== 后室 - 侧边栏图标 22222222222 =====================*/ :root{ /* ---------------侧边栏--------------------- */ --sb-bg-color:rgba(var(--sidebar-bg-color),1); --sidebar-icon-bg:none; --sidebar-icon-color:rgba(var(--swatch-primary-darkest,100,3,15),1); --sidebar-icon-size:3rem; /* ---------------标志图标--------------------- */ --backrooms-image: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/LOGO_Backrooms.svg'); --meg-image: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/LOGO_MEG.svg'); /* ---------------侧边栏图标--------------------- */ --bilibili-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_bilibili.svg'); --tieba-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_tieba.svg'); --fandom-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_fandom.svg'); --discord-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_discord.svg'); --sidebar-01-icon:var(--unset-icon); --sidebar-02-icon:var(--unset-icon); --sidebar-03-icon:var(--unset-icon); --sidebar-04-icon:var(--unset-icon); --sidebar-05-icon:var(--unset-icon); --sidebar-06-icon:var(--unset-icon); --sidebar-07-icon:var(--unset-icon); --sidebar-08-icon:var(--unset-icon); --sidebar-09-icon:var(--unset-icon); } #side-bar .side-block:first-child a img{ display:none; } #side-bar .side-block:first-child a:not([href="javascript:;"]):after{ content: ' '; display: inline-block !important; width:var(--sidebar-icon-size); height:var(--sidebar-icon-size); background-image: var(--sidebar-icon-bg); background-color: var(--sidebar-icon-color); -webkit-mask-image:var(--unset-icon); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image:var(--unset-icon); mask-size: contain; mask-position: center; mask-repeat: no-repeat; } @media (max-width: 500px) { #side-bar .side-block:first-child a:after{ width:var(--sidebar-icon-sizeMOB); height:var(--sidebar-icon-sizeMOB); } } /* 手动 */ #side-bar .side-block:first-child a:nth-child(1):after{ mask-image:var(--sidebar-01-icon); -webkit-mask-image:var(--sidebar-01-icon); } #side-bar .side-block:first-child a:nth-child(2):after{ mask-image:var(--sidebar-02-icon); -webkit-mask-image:var(--sidebar-02-icon); } #side-bar .side-block:first-child a:nth-child(3):after{ mask-image:var(--sidebar-03-icon); -webkit-mask-image:var(--sidebar-03-icon); } #side-bar .side-block:first-child a:nth-child(4):after{ mask-image:var(--sidebar-04-icon); -webkit-mask-image:var(--sidebar-04-icon); } #side-bar .side-block:first-child a:nth-child(5):after{ mask-image:var(--sidebar-05-icon); -webkit-mask-image:var(--sidebar-05-icon); } #side-bar .side-block:first-child a:nth-child(6):after{ mask-image:var(--sidebar-06-icon); -webkit-mask-image:var(--sidebar-06-icon); } #side-bar .side-block:first-child a:nth-child(7):after{ mask-image:var(--sidebar-07-icon); -webkit-mask-image:var(--sidebar-07-icon); } #side-bar .side-block:first-child a:nth-child(8):after{ mask-image:var(--sidebar-08-icon); -webkit-mask-image:var(--sidebar-08-icon); } #side-bar .side-block:first-child a:nth-child(9):after{ mask-image:var(--sidebar-09-icon); -webkit-mask-image:var(--sidebar-09-icon); } /* 自动 */ #side-bar .side-block:first-child a[href*="twitter.com"]:after{ mask-image:var(--twitter-icon); -webkit-mask-image:var(--twitter-icon); } #side-bar .side-block:first-child a[href*="tieba"]:after{ mask-image:var(--tieba-icon); -webkit-mask-image:var(--tieba-icon); } #side-bar .side-block:first-child a[href*="fandom"]:after{ mask-image:var(--fandom-icon); -webkit-mask-image:var(--fandom-icon); } #side-bar .side-block:first-child a[href*="discord"]:after{ mask-image:var(--discord-icon); -webkit-mask-image:var(--discord-icon); } #side-bar .side-block:first-child a[href*="bili"]:after{ mask-image:var(--bilibili-icon); -webkit-mask-image:var(--bilibili-icon); } #side-bar .side-block:first-child a[href*="backrooms-wiki-cn"]:after{ mask-image:var(--brcn-icon); -webkit-mask-image:var(--brcn-icon); } #side-bar .side-block:first-child a[href*="twitter"]:after{ mask-image:var(--twitter-icon); -webkit-mask-image:var(--twitter-icon); } #side-bar .side-block:first-child a[href*="reddit"]:after{ mask-image:var(--reddit-icon); -webkit-mask-image:var(--reddit-icon); } #side-bar .side-block:first-child a[href*="youtube"]:after{ mask-image:var(--ytb-icon); -webkit-mask-image:var(--ytb-icon); } #side-bar .side-block:first-child a[href*="instagram"]:after{ mask-image:var(--instagram-icon); -webkit-mask-image:var(--instagram-icon); } #side-bar .side-block:first-child a[href*="facebook"]:after{ mask-image:var(--facebook-icon); -webkit-mask-image:var(--facebook-icon); } #side-bar .side-block:first-child a[href*="tiktok"]:after{ mask-image:var(--tiktok-icon); -webkit-mask-image:var(--tiktok-icon); }
/* ===================== 后室 - 版头居中 33333333333333333333 ===================== */ :root{ /* 版头标志 */ --hdlg-top: 0rem; --hdlg-bgsz-pc: auto calc(var(--header-height-on-desktop) * 1.8 ) ; --hdlg-bgsz-mob: auto 14rem; } /*========================================== 版头居中 by Woedenaz ============================================*/ @supports(display: grid) { :root { /* header measurements */ --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } } /*========================================== 后室调整 ============================================*/ /*------------------- 版头标题 -------------------*/ #header h1 { top: 0rem; } #header h2 { top: 1rem; } #container #header h1 a::after, #container #header h2 span::after, #container #header h1 a, #container #header h1 a::before, #container #header h2 span, #container #header h2 span::before { display: inline-flex; justify-content: center; } #container #header h1 a::after, #container #header h1 a, #container #header h1 a::before { position: absolute; } /*------------------- 标志 -------------------*/ #header::before { top: var(--hdlg-top); background-size: var(--hdlg-bgsz-pc); background-position:50%; height: var(--header-height-on-desktop); opacity: 0.7; } /*------------------- 手机-------------------*/ @media only screen and (max-width: 500px){ #header::before { height: var(--header-height-on-mobile); background-size: var(--hdlg-bgsz-mob); } }