Obsidian 样式 - 界面透明图片背景

给 Obsidian 界面添加透明图片背景，可以设置深浅模式不同图片。

深色模式	浅色模式

可用 Style setting 设置的选项：

CSS 片段

/* @settings

name: Background Image Settings | 背景图片设置
id: background-image-settings
settings:
    - 
        id: light-background-image
        title: Light Theme Background Image URL
        title.zh: 浅色主题背景图片 URL
        type: variable-text
        default: url(https://haowallpaper.com/link/common/file/previewFileImg/16008179683085696)

    - 
        id: dark-background-image
        title: Dark Theme Background Image URL
        title.zh: 深色主题背景图片 URL
        type: variable-text
        default: url(https://haowallpaper.com/link/common/file/previewFileImg/79dc761210915a5728604c762b6fc0bd)
    - 
        id: background-opacity
        title: Background Image Opacity
        title.zh: 背景图片不透明度
        type: variable-number-slider
        default: 0.2
        min: 0
        max: 1
        step: 0.01
        format: 

    - 
        id: background-image-blur
        title: Blur Amount
        title.zh: 模糊程度
        type: variable-number-slider
        default: 0
        min: 0
        max: 20
        step: 0.1
        format: px

    - 
        id: background-image-contrast
        title: Contrast
        title.zh: 对比度
        type: variable-number-slider
        default: 1
        min: 0
        max: 3
        step: 0.1
        format:

    - 
        id: background-image-saturate
        title: Saturate
        title.zh: 饱和度
        type: variable-number-slider
        default: 1
        min: 0
        max: 3
        step: 0.1
        format:

    - 
        id: background-image-brightness
        title: Brightness
        title.zh: 亮度
        type: variable-number-slider
        default: 1
        min: 0
        max: 3
        step: 0.1
        format:

*/
body {
  --light-background-image: url(https://haowallpaper.com/link/common/file/previewFileImg/16008179683085696);
  --dark-background-image: url(https://haowallpaper.com/link/common/file/previewFileImg/79dc761210915a5728604c762b6fc0bd);
  --background-opacity: 0.2;
  --background-image-blur: 0;
  --background-image-contrast: 1;
  --background-image-saturate: 1;
  --background-image-brightness: 1;
}

/* CSS Styling to apply these settings */
.theme-light {
  --background-image: var(--light-background-image);
}

.theme-dark {
  --background-image: var(--dark-background-image);
}

body::before {
  content: "";
  position: fixed;
  background-image: var(--background-image);
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  filter: blur(var(--background-image-blur)) contrast(var(--background-image-contrast)) saturate(var(--background-image-saturate)) brightness(var(--background-image-brightness));
  opacity: var(--background-opacity);
  z-index: var(--layer-menu);
  pointer-events: none;
  transition: none;
}

Reference

• Layers - Developer Documentation (obsidian.md)
• Obsidian样式-缩减栏宽模式下美化笔记内部背景

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。