本帖在本人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%);
}
完活~
