CSS3 背景图 插入 SVG 或图片 base64

css3 有个冷门功能

可以样式里直接写入图片
不需要引用外部图片，而是直接在样式里写

data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><circle cx="50%" cy="50%" r="10" stroke="#c53f46" stroke-width="2" fill="rgba(0,0,0,0)"/></svg>

如图,上面那串代码就是图片里显示的东西
由于编辑器的问题
没法直接放入svg图片
但你可以吧上面那段直接复制到浏览器地址栏来查看

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32">    <circle cx="50%" cy="50%" r="10" stroke="#c53f46" stroke-width="2" fill="rgba(0,0,0,0)"/></svg>

如果你有一个正确的svg代码
那你只需要把这个代码加个头

data:image/svg+xml;charset=utf-8,[svg内容]...

或者弄个base64加密加密
↓效果和最上面的是一样的

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+Cgk8Y2lyY2xlIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjEwIiBzdHJva2U9IiNjNTNmNDYiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiYSgwLDAsMCwwKSIvPgo8L3N2Zz4=

base64也可以用来显示普通的png jpeg格式图片
你可以在一些网站上转换成base64格式
比如b64.io
不过能转换base64的网站百度一抓一大把

但很遗憾的是它们一般都很长（跳到最下面有惊喜）

---

语法结构：

data:image/svg+xml;charset=utf-8

1 data:image        表示了这是个data类型url2 /svg+xml;         表示了这是个svg格式图片3 charset=utf-8**   声明了这是以utf8格式编码的内容----------如果是Base64的话charset就是base64如果是png的话/svg+xml;就变成了/png;如此简单明了

---

至于 “data”这个冷门的类型
是在RFC2397(1998)）提出的
目的是为了在图片尺寸很小的时候，省力点，免得引用url浪费资源
虽然也是个老套的东西但莫名有用啊

当然你也可以弄点大图
就像这样↓
这只是个很小的png，实在是长的可以