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')

加上

 top/cover no-repeat fixed

即

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')  top/cover no-repeat fixed

之后粘贴即可

通过对比发现：
就是把下面的内容

url('data:image/svg+xml,<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>') top/cover no-repeat fixed

,左尖括号 < 替换成 %3C，把 < 替换成 %3E （补充下，如果是其他图片可能不止这几个，但是这张图只替换了这几个。不太了解前端到底需要转哪些特殊字符，因为我发现有些空格 / " 也都没有转），即

 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') top/cover no-repeat fixed

PNG格式作为背景图片（不可行） #

试着将这张图片用base64编码
这里之所以不放字符了，是因为我放了之后obsidian卡死了（30多万个字符），所以突然联想到一个问题，这就是为什么我把这个base64放到StyleSettings里面的时候，没效果而且卡死的原因把，哈哈，之前一直没注意
试着把png先转为svg，之后再按照svg作为背景的方法做一遍。
转换后的svg图片(不知道为什么图片方向变了，我第一次下载这张图【png】确实是这个方向，后面我调整正了，现在又歪了)
有两百多万多个字符。。。照样没效果，不过这次没卡死了用了个纯色png转svg，有效果了，但是图片变了一些。我觉得可能是转换的问题？不过可以确定的一点就是，png没效果的一个原因是字符太多
最后尝试用一张纯色png，转base64，并用url("")的形式放入设置，照样没效果。不知道是不支持png，还是我的设置方法错了，这次只有9000个字符，但是卡顿了，tab界面花屏，如图

文章中用到的（可能用到的）url如下

https://codepen.io/yoksel/details/MWKeKK svg->encode->css https://stackoverflow.com/questions/41405884/svg-data-image-as-css-background 关于svg转base64并嵌入css的做法（可能可行，没试过，本文中采用稍微简单的办法） https://meyerweb.com/eric/tools/dencoder/ url encode（没用上，因为发现他把所有字符都转码了，实际上只转了 < 和 > https://www.base64-image.de/ 图片转base64
https://tool.chinaz.com/tools/urlencode.aspx url编码解码
https://www.asciim.cn/m/tools/convert_ascii_to_string.html ascaii与字符串的转换
https://forever-z-133.github.io/demos/single/svg-to-base64.html svg转base64
https://products.aspose.app/pdf/zh/conversion/png-to-svg png转svg
https://github.com/Akifyss/obsidian-border/issues/251 obsidian-border主题，issue中作者的相关回复