给文字一个可以落脚的地方

问题是这样的。我花了那么多时间给网站做了一层有生命感的背景,山、鸟、星星,结果我真去读一篇文章的时候,文字就那样干巴巴地摆在背景上面。完全没有分层感。文字看起来就像粘在场景上,彻底扁平,好像有人把一段文字直接印在照片上就算完事。说实话,看起来比我加背景之前还糟。

我先试了个最省事的办法。就是给阅读区加一圈边框。

.reading-panel {
  border: 1px solid var(--color-border);
}

没用。当真正的问题是文字和背景处在同一个视觉平面上时,一圈细线什么忙都帮不上。看着还是黏在上面,只不过现在多了个框而已。

于是我反着来,给它加了个实心的框。正儿八经的背景色,整个栏都填满。这倒是有效,文字一下子就浮起来了。可这下我又完全看不见阅读区背后的背景了,而做背景的整个意义就在这儿。我基本上把自己花了一周画出来的东西给盖住了。

最后落地的方案是一块磨砂玻璃面板。这一栏有个背景,大部分不透明但不是全部,再加上后面的一层模糊,这样你还是能透过它隐约看到岛屿和鸟,但很柔和,同时文字也有了一个足够扎实、能立住脚的底子。

.reading-panel {
  background: var(--panel-bg); /* about 80% of the surface colour */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

那行 -webkit 写在前面可不是我讲究整洁,一开始我是反过来写的,标准写法在上面,结果模糊在构建出来的版本里悄无声息地就是不生效。后来才搞清楚,这个项目用的 CSS 压缩工具会把不带前缀的 backdrop-filter 直接丢掉,如果它排在带 webkit 前缀那行前面的话。我对着一块半透明但不模糊的面板发了好一阵子呆,想不通自己的代码为什么不起作用,后来才找到这个原因。把这两行顺序换一下,模糊效果就回来了。

可读性和透光度之间的平衡也来回调了好几轮。太透了,山上暗的地方飘过去的时候文字就晃眼睛,看不清。太实了,背景又白加了。我最后干脆拿能飘到文字后面的场景里最暗和最亮的部分去对比度检验,把不透明度定在无论后面飘过什么都还能读清楚的那条线以上。够用了,现在页面总算有点纵深感,而不是看着像一张贴平了的贴纸。