样式分享：纸张纹理的编辑区

经验分享
1

效果

在编辑区添加渐变的纸张纹理背景，如图：

251119_样式分享：纸张纹理的编辑区-img-251119_112002.webp
251119_样式分享：纸张纹理的编辑区-img-251119_112002.webp1656×1223 79.9 KB

暗色背景：

251119_样式分享：纸张纹理的编辑区-img-251119_112030.webp
251119_样式分享：纸张纹理的编辑区-img-251119_112030.webp1656×1223 91.9 KB

样式文件

使用 CSS：

/* 纸张纹理的图片 */
:root {
    --paper-texture: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTA4bW0iCiAgIGhlaWdodD0iMjg1Ljc1bW0iCiAgIHZpZXdCb3g9IjAgMCA1MDggMjg1Ljc1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxIj48ZmlsdGVyCiAgICAgICBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiCiAgICAgICBpZD0iZmlsdGVyMTAxIgogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICB3aWR0aD0iMSIKICAgICAgIGhlaWdodD0iMSI+PGZlVHVyYnVsZW5jZQogICAgICAgICBpZD0iZmVUdXJidWxlbmNlMTAxIgogICAgICAgICBiYXNlRnJlcXVlbmN5PSIwLjAyMDAwMDAwMDAwMDAwMDAxMSIKICAgICAgICAgbnVtT2N0YXZlcz0iOSIKICAgICAgICAgc2VlZD0iMTAiCiAgICAgICAgIHR5cGU9ImZyYWN0YWxOb2lzZSIgLz48ZmVEaWZmdXNlTGlnaHRpbmcKICAgICAgICAgaWQ9ImZlRGlmZnVzZUxpZ2h0aW5nMTAxIgogICAgICAgICBzdXJmYWNlU2NhbGU9IjIuMDQ5OTk5OTUiCiAgICAgICAgIGRpZmZ1c2VDb25zdGFudD0iMSI+PGZlRGlzdGFudExpZ2h0CiAgICAgICAgICAgaWQ9ImZlRGlzdGFudExpZ2h0MTAzIgogICAgICAgICAgIGF6aW11dGg9Ijc1IgogICAgICAgICAgIGVsZXZhdGlvbj0iNTAiIC8+PC9mZURpZmZ1c2VMaWdodGluZz48L2ZpbHRlcj48L2RlZnM+PGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTU0KSI+PHJlY3QKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojN2I0OTM4O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoyLjY0NTgzO2ZpbHRlcjp1cmwoI2ZpbHRlcjEwMSkiCiAgICAgICBpZD0icmVjdDEwMSIKICAgICAgIHdpZHRoPSI1MDgiCiAgICAgICBoZWlnaHQ9IjI4NS43NSIKICAgICAgIHg9IjE1NTQiCiAgICAgICB5PSItNC45NzM3OTkyZS0xNCIgLz48L2c+PC9zdmc+Cg==)
}

/* 空标签页 */
.view-content .empty-state-container,
/* 阅读视图 */
.markdown-preview-view.markdown-rendered,
/* 编辑视图的编辑器 */
.cm-editor {
    --editor-texture: var(--paper-texture);
    --c: 
        color-mix(in srgb, var(--background-primary), transparent calc(0%));
 	--c-deep: 
        color-mix(in srgb, var(--background-primary), transparent calc(35%));
    background-color: var(--background-primary) !important;
    background-image: 
        linear-gradient(to right, var(--c), var(--c-deep) 30%, 
            var(--c-deep) 70%, var(--c) 100%), 
            var(--editor-texture) !important;
    background-blend-mode: normal, multiply;
}

/* 暗色主题的调整 */
.theme-dark {
    .view-content .empty-state-container,
    .markdown-preview-view.markdown-rendered,
    .cm-editor {
        --c-deep: 
            color-mix(in srgb, var(--background-primary), transparent calc(10%));
        background-blend-mode: normal, color-dodge;
    }
}

点击下载：Moy纸张纹理背景分享

使用方法： 如何在OB内应用CSS修改 - 疑问解答 - Obsidian 中文论坛

声明

  1. 添加背景纹理的方法来自主题 Fancy-a-story
  2. 背景纹理的图案来自主题 Retronotes
  3. 标题字体：匯文明朝體
  4. 截图使用的主题为Origami
7 个赞