Obsidian设置图片背景之二_obsidian 背景-CSDN博客

本文链接：https://blog.csdn.net/skoyine/article/details/143869617

上一篇文章我介绍了如何Obsidian如何设置图片背景，但是插件Dynamic Background功能还是略有不足：不能调节亮度，背景太亮的话就看不清字，以下是解决方案

下载插件和主题

参考：https://blog.csdn.net/skoyine/article/details/143860792?spm=1001.2014.3001.5501

修改Dynamic Background插件

打开.obsidian文件夹中的Dynamic Background插件的main.js和style.css文件

在style.css文件中添加如下内容
rh-wallpaper-cover中添加如下内容

这是设置初始值

filter: brightness(70%);

然后再到main.js文件中的下面添加如下的内容并且将上一块的this.plugin.SetWallpaperBlur();改成this.plugin.SetWallpaperEffects();

这是添加一个亮度的控制滑块

new import_obsidian.Setting(containerEl).setName("Brightness").setDesc("The brightness of the wallpaper.").addSlider((tc) => {
      tc.setDynamicTooltip().setLimits(0, 200, 1).setValue(this.plugin.settings.brightness).onChange((value) => __async(this, null, function* () {
        this.plugin.settings.brightness = value;
        yield this.plugin.saveSettings();
        this.plugin.SetWallpaperEffects();
      }));
    });

如下图所示
在这里插入图片描述

添加SetWallpaperEffects函数并且将SetWallpaperBlur函数注释

  SetWallpaperEffects() {
    // 获取设置的模糊度和亮度
    let blurValue = "blur(" + this.settings.blur.toString() + "px)";  // 从设置中获取模糊度
    let brightnessValue = "brightness(" + this.settings.brightness.toString() + "%)";  // 从设置中获取亮度
    
    // 合并模糊和亮度效果
    let filterValue = blurValue + " " + brightnessValue;

    // 获取目标元素
    let div = document.querySelector('.rh-wallpaper-cover');
    
    // 应用新的 filter 样式
    div.style.filter = filterValue;
}

在这里插入图片描述