Obsidian自定义CSS背景渐变不显示问题排查求助

问题说明 #

尝试使用以下CSS代码在Obsidian中设置自定义背景渐变：

.workspace,
.markdown-preview-view,
.markdown-source-view,
.side-dock,
.mod-root {
  background-color: transparent !important;
}

body {
  background-size: 500px 500px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

但背景渐变未按预期显示，已确认：

• 主题支持自定义CSS
• CSS已保存至正确文件（如obsidian.css）
• 无其他样式覆盖该CSS

解决建议 #

1. 提升选择器优先级
   部分主题会给容器元素设置更具体的背景样式，仅用body选择器优先级可能不足。可以尝试两种方式：

   • 给body添加更具体的父级选择器：

     .app-container body {
       background-size: 500px 500px;
       background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
     }
     

   • 给背景样式添加!important强制生效：

     body {
       background-size: 500px 500px !important;
       background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px) !important;
     }
     

2. 补充透明容器范围
   Obsidian中还有可能遮挡背景的容器元素，将它们也加入透明设置：

   .workspace,
   .markdown-preview-view,
   .markdown-source-view,
   .side-dock,
   .mod-root,
   .app-container,
   .workspace-leaf-content {
     background-color: transparent !important;
   }
   

3. 测试对比度问题
   你设置的黑色圆点在深色主题背景下可能难以分辨，可临时将圆点改为亮色验证是否显示：

   body {
     background-size: 500px 500px;
     background-image: radial-gradient(circle, #ffffff 1px, rgba(0, 0, 0, 0) 1px);
   }
   

4. 核对Obsidian设置
   确认已在「设置」→「外观」中开启「CSS snippets」（若使用片段文件），新版本Obsidian推荐将自定义CSS放在snippets文件夹下，而非根目录的obsidian.css。

内容的提问来源于stack exchange，提问作者angelollima