代碼

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文件的方式。

總結

以上是生活随笔為你收集整理的学习记录596@CSS用svg做背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。