作者：WuSi（wusitech@qq.com）

（本文整理自本站背景与视觉效果的实现过程，留作备查）

0xFF 感谢大佬

开工之前，先感谢大佬：

• D-SKETON：主题 reimu 的作者。本站的整体框架和大量视觉效果原型都来自这个主题，本文提到的许多改造，也是在他的主题基础上完成的。
• CialloKing：背景图池取自他的站点，页脚那些随机背景图就来自这里，图池引用链的思路也参考了他的做法。

0x00 想要什么效果

想法很简单：页面背景是一张随机番剧图，固定不动，内容像一张半透明的卡片浮在上面。暗色模式下文字和卡片也要能看清。

听起来不难，但主题自带的背景是纯色，直接加背景图会被盖住。中间改了好几轮才对。

0x10 第一个坑：主题的底色

改之前先看了下主题的 CSS，发现有两层不透明底色：

body { background: var(--color-background); }
#wrap {
  position: absolute;
  z-index: 1;
  background: var(--color-background);
}

#wrap 这层是绝对定位 + z-index:1，也就是内容容器本身不透明。不管把背景垫在它下面多少层，都会被挡住。

一开始只改了 body 的背景，页面上什么都看不见——因为真正挡住的不是 body，是 #wrap。

解决办法是把这两层的底色都放开：

body, #container, #wrap { background: transparent !important; }

然后单独建一个固定层放背景图。

0x20 背景层怎么搭

结构是这样的：

  flowchart TB
    L1["#wusi-bg（固定背景层 z-index:-1）"]
    L2["占位图 img（33KB，先到）"]
    L3["大图 img（257KB，后到，淡入覆盖）"]
    L4["#wrap（内容，z-index:1）"]
    L1 --> L2 --> L3 --> L4

两层图叠在一起：占位图先出来，大图加载完再淡入盖住。这样不管大图多慢，首屏都不会空着。

代码里用 JS 动态建层，不写死在 HTML 里：

var layer = document.createElement('div');
layer.style.cssText = 'position:fixed;inset:0;z-index:-1;background-size:cover;';

0x30 固定不滚动

固定这一点靠 position: fixed，不是 background-attachment: fixed。

本文2026-10-15首发于吾思 梦阁，最后修改于2026-10-15