【CSS Snippet】网格圆点背景

将如下代码保存到 .obsidian/snippets/GridBackground.css 文件中（自行创建文件），然后在 Obsidian 设置——外观——代码片段中开启。给文档的 frontmatter 添加 cssclasses 属性：

• cssclasses: grid为网格；
• cssclasses: dot为圆点

可用 Style Settings 插件调节细节设定。

/**
 * @name: Grid Background
 * @author: 稻米鼠
 * @description: To add a grid background to my notes.
 * @created: 2024-11-26 09:28:10
 * @updated: 2024-12-02 08:26:31
 * @version: 1.0.0
 */

/* @settings
name: Grid Background
id: Grid-Background
settings:

  - 
    id: grid-usage-title
    title: 使用说明
    type: heading
    level: 2
  - 
    id: grid-usage
    title: 使用说明
    type: info-text
    description: "给文档的 frontmatter 添加 cssclasses 属性：\n- `cssclasses: grid`为网格；\n- `cssclasses: dot`为圆点;"
    markdown: true
  - 
    id: grid-size
    title: 网格大小/圆点间距（em）
    type: variable-number
    default: 1.5
    format: em
  - 
    id: grid-stroke-width
    title: 网格粗细/圆点半径（px）
    type: variable-number
    default: 1
    format: px
  - 
    id: grid-color
    title: 网格/圆点颜色
    type: variable-color
    opacity: true
    format: rgb
    default: 'rgba(0, 0, 0, .06)'
*/
:root {
  --grid-size: 1.5em;
  --grid-stroke-width: 1px;
  --grid-color: rgba(0, 0, 0, .06);
}
.grid,
.dot {
  & .cm-content,
  & .markdown-preview-sizer.markdown-preview-sizer {
    background-position: center center;
    background-size: var(--grid-size) var(--grid-size);
  }
}
.grid {
  & .cm-content,
  & .markdown-preview-sizer.markdown-preview-sizer {
    background-image:

        linear-gradient(to right, var(--grid-color) var(--grid-stroke-width), transparent var(--grid-stroke-width)),
        linear-gradient(to bottom, var(--grid-color) var(--grid-stroke-width), transparent var(--grid-stroke-width));
  }
}
.dot {
  & .cm-content,
  & .markdown-preview-sizer.markdown-preview-sizer {
    background-image: radial-gradient(circle, var(--grid-color) calc(var(--grid-stroke-width) * 2), transparent var(--grid-stroke-width));
  }
}