本帖在本人bili同步发布

Memos 是一个非常好用的笔记/备忘网站
自己部署起来也非常方便（docker部署）
docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:stable
你可以在GitHub-memos找到它
其设置中可以自定义CSS与脚本，具有很高的自定义化程度

问题描述

在自定义Memos时我遇到一个问题：
设置背景图像后，背景会随滚动，而不是固定在窗口背景，这会导致背景图片被拉伸很长

一开始我选择正常的body后放置img 但是很明显body就是滚动的部分行不通

/* 默认浅色模式 */
html {
  background-image: url('很长的imgurl 我给省略了');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

移动到html后仍然出现了这一问题

html就是scroll的这咋整

解决方案

要解决这个问题，可以将背景图像应用到一个伪元素上，并确保背景图像固定在窗口大小，同时允许页面内容滚动
~~毕竟不滚动的话还要这个笔记站干嘛当花瓶吗~~

1.设置HTML和BODY的高度和溢出属性

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: auto;
}

2.将背景图像应用到一个伪元素

接下来，将背景图像应用到body的伪元素上，并确保背景图像固定在窗口大小

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://bbs.liubiligrass.com/assets/files/2024-02-28/1709131774-573332-20230728-233736.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1; /* 确保背景图像在内容后面 */
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body::before {
    background-image: url('https://www.liubiligrass.com/assets/images/banner-bg.png');
  }
}

再加上一点点美化css的修饰

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / 65%);
}

.bg-zinc-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / 65%);
}
.dark\:bg-zinc-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / 75%);
}

完活~