Obsidian

border-theme背景图片问题

2024年12月4日 09:10 周三
学习
Obsidian

svg格式作为背景图片（简单图片可行） #

以下面这张图片为例
最简单的方式，用记事本/文本编辑器，打开svg图片，全选，复制，即

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><g transform="
          rotate(0 960 540) 
          translate(-0 -0)
          scale(1)
        "><rect width="1920" height="1080" fill="rgb(184, 171, 255)"></rect><g transform="translate(0, 0)"><path fill="rgb(131, 114, 218)" fill-opacity="1" d="M0,352.943L45.714,350.075C91.429,347.207,182.857,341.471,274.286,340.581C365.714,339.692,457.143,343.65,548.571,344.095C640,344.54,731.429,341.472,822.857,303.183C914.286,264.894,1005.714,191.383,1097.143,185.175C1188.571,178.967,1280,240.06,1371.429,221.336C1462.857,202.612,1554.286,104.069,1645.714,98.48C1737.143,92.892,1828.571,180.258,1874.286,223.941L1920,267.624L1920,1080L1874.286,1080C1828.571,1080,1737.143,1080,1645.714,1080C1554.286,1080,1462.857,1080,1371.429,1080C1280,1080,1188.571,1080,1097.143,1080C1005.714,1080,914.286,1080,822.857,1080C731.429,1080,640,1080,548.571,1080C457.143,1080,365.714,1080,274.286,1080C182.857,1080,91.429,1080,45.714,1080L0,1080Z"></path></g><g transform="translate(0, 360)"><path fill="rgb(79, 57, 180)" fill-opacity="1" d="M0,136.093L45.714,117.434C91.429,98.774,182.857,61.455,274.286,80.719C365.714,99.983,457.143,175.829,548.571,189.505C640,203.181,731.429,154.687,822.857,130.414C914.286,106.141,1005.714,106.09,1097.143,141.274C1188.571,176.458,1280,246.877,1371.429,284.697C1462.857,322.517,1554.286,327.739,1645.714,284.675C1737.143,241.611,1828.571,150.263,1874.286,104.589L1920,58.914L1920,720L1874.286,720C1828.571,720,1737.143,720,1645.714,720C1554.286,720,1462.857,720,1371.429,720C1280,720,1188.571,720,1097.143,720C1005.714,720,914.286,720,822.857,720C731.429,720,640,720,548.571,720C457.143,720,365.714,720,274.286,720C182.857,720,91.429,720,45.714,720L0,720Z"></path></g><g transform="translate(0, 720)"><path fill="rgb(26, 0, 143)" fill-opacity="1" d="M0,107.121L45.714,134.307C91.429,161.493,182.857,215.866,274.286,254.33C365.714,292.794,457.143,315.35,548.571,300.514C640,285.679,731.429,233.452,822.857,180.313C914.286,127.174,1005.714,73.123,1097.143,43.365C1188.571,13.606,1280,8.141,1371.429,41.079C1462.857,74.017,1554.286,145.358,1645.714,167.782C1737.143,190.206,1828.571,163.713,1874.286,150.467L1920,137.221L1920,360L1874.286,360C1828.571,360,1737.143,360,1645.714,360C1554.286,360,1462.857,360,1371.429,360C1280,360,1188.571,360,1097.143,360C1005.714,360,914.286,360,822.857,360C731.429,360,640,360,548.571,360C457.143,360,365.714,360,274.286,360C182.857,360,91.429,360,45.714,360L0,360Z"></path></g></g></svg>

之后打开https://codepen.io/yoksel/details/MWKeKK 网站，在 Insert your SVG中粘贴，得到

最后把url("") 这块复制【没有分号】，即

url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"%3E%3Cg transform=" rotate(0 960 540) translate(-0 -0) scale(1) "%3E%3Crect width="1920" height="1080" fill="rgb(184, 171, 255)"%3E%3C/rect%3E%3Cg transform="translate(0, 0)"%3E%3Cpath fill="rgb(131, 114, 218)" fill-opacity="1" d="M0,352.943L45.714,350.075C91.429,347.207,182.857,341.471,274.286,340.581C365.714,339.692,457.143,343.65,548.571,344.095C640,344.54,731.429,341.472,822.857,303.183C914.286,264.894,1005.714,191.383,1097.143,185.175C1188.571,178.967,1280,240.06,1371.429,221.336C1462.857,202.612,1554.286,104.069,1645.714,98.48C1737.143,92.892,1828.571,180.258,1874.286,223.941L1920,267.624L1920,1080L1874.286,1080C1828.571,1080,1737.143,1080,1645.714,1080C1554.286,1080,1462.857,1080,1371.429,1080C1280,1080,1188.571,1080,1097.143,1080C1005.714,1080,914.286,1080,822.857,1080C731.429,1080,640,1080,548.571,1080C457.143,1080,365.714,1080,274.286,1080C182.857,1080,91.429,1080,45.714,1080L0,1080Z"%3E%3C/path%3E%3C/g%3E%3Cg transform="translate(0, 360)"%3E%3Cpath fill="rgb(79, 57, 180)" fill-opacity="1" d="M0,136.093L45.714,117.434C91.429,98.774,182.857,61.455,274.286,80.719C365.714,99.983,457.143,175.829,548.571,189.505C640,203.181,731.429,154.687,822.857,130.414C914.286,106.141,1005.714,106.09,1097.143,141.274C1188.571,176.458,1280,246.877,1371.429,284.697C1462.857,322.517,1554.286,327.739,1645.714,284.675C1737.143,241.611,1828.571,150.263,1874.286,104.589L1920,58.914L1920,720L1874.286,720C1828.571,720,1737.143,720,1645.714,720C1554.286,720,1462.857,720,1371.429,720C1280,720,1188.571,720,1097.143,720C1005.714,720,914.286,720,822.857,720C731.429,720,640,720,548.571,720C457.143,720,365.714,720,274.286,720C182.857,720,91.429,720,45.714,720L0,720Z"%3E%3C/path%3E%3C/g%3E%3Cg transform="translate(0, 720)"%3E%3Cpath fill="rgb(26, 0, 143)" fill-opacity="1" d="M0,107.121L45.714,134.307C91.429,161.493,182.857,215.866,274.286,254.33C365.714,292.794,457.143,315.35,548.571,300.514C640,285.679,731.429,233.452,822.857,180.313C914.286,127.174,1005.714,73.123,1097.143,43.365C1188.571,13.606,1280,8.141,1371.429,41.079C1462.857,74.017,1554.286,145.358,1645.714,167.782C1737.143,190.206,1828.571,163.713,1874.286,150.467L1920,137.221L1920,360L1874.286,360C1828.571,360,1737.143,360,1645.714,360C1554.286,360,1462.857,360,1371.429,360C1280,360,1188.571,360,1097.143,360C1005.714,360,914.286,360,822.857,360C731.429,360,640,360,548.571,360C457.143,360,365.714,360,274.286,360C182.857,360,91.429,360,45.714,360L0,360Z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E')

加上

...

obsidian-theme

2024年12月3日 15:32 周二
学习
Obsidian

主题推荐 #

  1. Neumorphism-dark.json

  2. Sunset-base64.json ✔

  3. Obsidian-default-dark-alt ✔
    4. Obsidian-default-light-alt

  4. Neumorphism.json

  5. eyefriendly ✔

  6. boundy ✔ flexoki-light Borderless-light

关于obsidian主题border的背景图片设置 #

配合StyleSettings，在StyleSettings的这里设置

暂不明确 #

background中貌似存在转换规则，不是直接用url("")这个形式把图片base64放进来就可以了，目前觉得可能的转换规则

%3c 48+12=60  <
%3e 48+14=62   >
%23 32+3=35    #  
#下面的好像没用到，也不确定
%2b  32+11=43  + 
%3b ;
%2c ,

后续见另一篇文章
border-theme {% post_link ‘study/obsidian/border-theme’ ‘helo’ %}