obsidian外观
Obsidian 样式：缩减栏宽模式下美化笔记内部背景
插件ID：obsidian%E6%A0%B7%E5%BC%8F-%E7%BC%A9%E5%87%8F%E6%A0%8F%E5%AE%BD%E6%A8%A1%E5%BC%8F%E4%B8%8B%E7%BE%8E%E5%8C%96%E7%AC%94%E8%AE%B0%E5%86%85%E9%83%A8%E8%83%8C%E6%99%AF
obsidian%E6%A0%B7%E5%BC%8F-%E7%BC%A9%E5%87%8F%E6%A0%8F%E5%AE%BD%E6%A8%A1%E5%BC%8F%E4%B8%8B%E7%BE%8E%E5%8C%96%E7%AC%94%E8%AE%B0%E5%86%85%E9%83%A8%E8%83%8C%E6%99%AF
obsidian%E6%A0%B7%E5%BC%8F %E7%BC%A9%E5%87%8F%E6%A0%8F%E5%AE%BD%E6%A8%A1%E5%BC%8F%E4%B8%8B%E7%BE%8E%E5%8C%96%E7%AC%94%E8%AE%B0%E5%86%85%E9%83%A8%E8%83%8C%E6%99%AF：美化缩减栏宽模式下的笔记区的空白区域的背景，深浅模式下可以设置不同的网络图片
Obsidian 样式：缩减栏宽模式下美化笔记内部背景
效果展示
打开缩减栏宽设置
在设置的编辑器中进行设置：
可以配合 Editor Width Slider 插件进行调整笔记实际大小的宽度。
可以在 Style Setting 插件进行更换壁纸
由于阅读和编辑模式的 css 有点不一致，在阅读模式下背景图片可能会遮挡工具栏，这时可通过调整 阅读模式具体图片的高度 的大小来进行一定的调整了。
- 如何制作适合的壁纸
可以在 PPT 中设置图片摆放到两侧，适当修改一下，选择进行对称也行
CSS 片段
/* @settings
name: 缩减栏框下内部背景
id: background-under-frame
settings:
-
id: light-background-image
title: 浅色模式的图片
type: variable-text
default: url(https://picshack.net/ib/HfNO0TPdTq.png)
-
id: dark-background-image
title: 深色模式的图片
type: variable-text
default: url(https://picshack.net/ib/fBulilNYZ0.png)
-
id: top-tool-height
title: 阅读模式距离图片的高度
type: variable-text
default: 38px
*/
body {
/* --light-background-image: url(https://picshack.net/ib/WSGWY0jfYM.png); */
--light-background-image: url(https://picshack.net/ib/HfNO0TPdTq.png);
--dark-background-image: url(https://picshack.net/ib/fBulilNYZ0.png);
--top-tool-height: 38px;
}
/* 适配Zomm插件：防止遮挡 */
.markdown-source-view.mod-cm6 .cm-panels {
background-color: inherit;
color: inherit;
width: calc(var(--file-line-width) + 6%);
left: calc(47% - var(--file-line-width) / 2);
font-size: small;
}
/* 适配SNW插件的笔记引用按钮 */
.snw-header-count-wrapper {
position:fixed;
right: calc(48% - var(--file-line-width) / 2);
}
/* 浅色主题 */
.theme-light .view-content > .markdown-source-view.mod-cm6::after {
/* 设置背景属性 */
content: "";
position: fixed;
background-image: var(--light-background-image);
background-position: center center;
background-attachment: fixed;
/* 自动适应背景大小 */
background-size: cover;
/* 不重复背景 */
background-repeat: no-repeat;
/* 填充颜色 */
background-color: var(--background-primary);
/* 调整壁纸的大小 */
height: 100%;
width: 100%;
/* 设置笔记遮挡属性 */
left: 0;
/* top: var(--mod-top-height); */
transform: scale(1);
/* 调整图片：模糊度、对比度、饱和度、亮度 */
filter: blur(0px) contrast(1) saturate(1) brightness(1);
opacity: 1;
z-index: 0;
pointer-events: none;
transition: none;
-webkit-mask: linear-gradient(
to right,
var(--background-primary) 0%,
var(--background-primary) calc(47% - calc(var(--file-line-width) / 2)),
transparent calc(47% - var(--file-line-width) / 2),
transparent calc(53% + var(--file-line-width) / 2),
var(--background-primary) calc(53% + calc(var(--file-line-width) / 2)),
var(--background-primary) 100%
);
}
.theme-light
.markdown-preview-view:not(.colse-show-bg-image):not(
.kanban-plugin__markdown-preview-view
):not(.database-plugin__container)::after {
/* 设置背景属性 */
content: "";
position: fixed;
background-image: var(--light-background-image);
background-position: center center;
background-attachment: fixed;
/* 自动适应背景大小 */
background-size: cover;
/* 不重复背景 */
background-repeat: no-repeat;
/* 填充颜色 */
background-color: var(--background-primary);
/* 调整壁纸的大小 */
height: 100%;
width: 100%;
/* 设置笔记遮挡属性 */
right: 0;
top: var(--top-tool-height);
/* top: var(--mod-top-height); */
transform: scale(1);
/* 调整图片：模糊度、对比度、饱和度、亮度 */
filter: blur(0px) contrast(1) saturate(1) brightness(1);
opacity: 1;
z-index: 0;
pointer-events: none;
transition: none;
-webkit-mask: linear-gradient(
to right,
var(--background-primary) 0%,
var(--background-primary) calc(47% - calc(var(--file-line-width) / 2)),
transparent calc(47% - var(--file-line-width) / 2),
transparent calc(53% + var(--file-line-width) / 2),
var(--background-primary) calc(53% + calc(var(--file-line-width) / 2)),
var(--background-primary) 100%
);
}
/* 深色主题 */
.theme-dark .view-content > .markdown-source-view.mod-cm6::after {
/* 设置背景属性 */
content: "";
position: fixed;
background-image: var(--dark-background-image);
background-position: center center;
background-attachment: fixed;
/* 自动适应背景大小 */
background-size: cover;
/* 不重复背景 */
background-repeat: no-repeat;
/* 填充颜色 */
background-color: var(--background-primary);
/* 调整壁纸的大小 */
height: 100%;
width: 100%;
/* 设置笔记遮挡属性 */
left: 0;
/* top: var(--mod-top-height); */
transform: scale(1);
/* 调整图片：模糊度、对比度、饱和度、亮度 */
filter: blur(0px) contrast(1) saturate(1) brightness(1);
opacity: 1;
z-index: 0;
pointer-events: none;
transition: none;
-webkit-mask: linear-gradient(
to right,
var(--background-primary) 0%,
var(--background-primary) calc(47% - calc(var(--file-line-width) / 2)),
transparent calc(47% - var(--file-line-width) / 2),
transparent calc(53% + var(--file-line-width) / 2),
var(--background-primary) calc(53% + calc(var(--file-line-width) / 2)),
var(--background-primary) 100%
);
}
.theme-dark
.markdown-preview-view:not(.colse-show-bg-image):not(
.kanban-plugin__markdown-preview-view
):not(.database-plugin__container)::after {
/* 设置背景属性 */
content: "";
position: fixed;
background-image: var(--dark-background-image);
background-position: center center;
background-attachment: fixed;
/* 自动适应背景大小 */
background-size: cover;
/* 不重复背景 */
background-repeat: no-repeat;
/* 填充颜色 */
background-color: var(--background-primary);
/* 调整壁纸的大小 */
height: 100%;
width: 100%;
/* 设置笔记遮挡属性 */
left: 0;
top: var(--top-tool-height);
/* top: var(--mod-top-height); */
transform: scale(1);
/* 调整图片：模糊度、对比度、饱和度、亮度 */
filter: blur(0px) contrast(1) saturate(1) brightness(1);
opacity: 1;
z-index: 0;
pointer-events: none;
transition: none;
-webkit-mask: linear-gradient(
to right,
var(--background-primary) 0%,
var(--background-primary) calc(47% - calc(var(--file-line-width) / 2)),
transparent calc(47% - var(--file-line-width) / 2),
transparent calc(53% + var(--file-line-width) / 2),
var(--background-primary) calc(53% + calc(var(--file-line-width) / 2)),
var(--background-primary) 100%
);
}
讨论
若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。
