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

编程知识 更新时间:2023-04-06 07:26:29

代码

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/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做背景

本文发布于:2023-04-06 07:26:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/9b6fa8aad037991551a627682364e8ae.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:背景   CSS   svg

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 48659文章数
  • 14阅读数
  • 0评论数