学习记录596@CSS用svg做背景

代码

background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
      

展示出来的效果

最开始看到这个代码的时候是懵逼的，其实大概意思是背景图片使用了svg，并且这个svg是用base64加密的，我们用base64解密工具将第三个参数的那串字段解密，发现就是svg

<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="a" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 10h40M10 0v40M0 20h40M20 0v40M0 30h40M30 0v40" fill="none" stroke="#e0e0e0" opacity=".2"/><path d="M40 0H0v40" fill="none" stroke="#e0e0e0"/></pattern></defs><rect width="100%" height="100%" fill="url(#a)"/></svg>

在菜鸟教程中在线编辑器中展示：

如果不用这种方式在背景中使用svg，就用引入svg文件的方式。