css3 svg 背景图 data:image/svg+xml;base64

看到一个关于下拉菜单的样式

.search_form select {-webkit-appearance:none!important;-webkit-border-radius:0;background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+) no-repeat 100% center;border: 1px solid #ccc;border-radius: 0;color: #555;display: block;font-size: 1.6rem;line-height: 1.1;padding: 0.625em;transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;vertical-align: middle;margin-top:10px;margin-right:3px;}

其中有一个是背景图片是base64 引入的，比较好奇就查了一下，网上的解释：

图片的内容经过base64编码了，data:image/svg+xml;base64其实是图片的内容。主要目的是减少浏览器和服务器之间的连接数。提高服务器的并发能力！

我的下拉菜单的效果是这样的

那个base64引入的svg图就是那个小三角

追根到底，我用php 把那个base64 解密了下，代码如下：


$str = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+";
echo base64_decode($str);

浏览器浏览的结果就是那个小黑色三角的图片，浏览器中查看源代码，源代码如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="12px" y="0px" width="24px" height="3px" viewBox="0 0 6 3" enable-background="new 0 0 6 3" xml:space="preserve"><polygon points="5.992,0 2.992,3 -0.008,0 "/></svg>

原来如此！实际上是个svg的图片而已！！

css3 svg 背景图 data:image/svg+xml;base64相关推荐

i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
SVG 背景图生成器：Heazy
Heazy,一款在线的SVG 背景图生成器,能够让你的网站背景.设计文稿.PPT.海报背景等等生成酷炫的SVG背景图,使用的时候,根据提供的预设SVG背景图模版进行手动参数调整或者随机推荐,即可创作出 ...
SVGO: Node.js 开发的 SVG 矢量图优化工具(svg压缩工具）
SVG图片压缩这是个通过借助npm包的一种方式去压缩svg的图片,由于阿里的图库自己创建的图标有大小的限制,当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩. 1.下载no ...
C#操作SVG矢量图-nuget库svg
文章目录 NuGet 测试文档 NuGet 新建C#应用配置包源工具->NuGet包管理器->程序包管理器设置新建包源https://www.nuget.org/api/v2/ 安 ...
html怎么把图片做成一条花纹,CSS3 花纹背景图
CSS 语言: CSSSCSS 确定 html { height: 100%; background: -webkit-repeating-radial-gradient(circle, transp ...
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录一.SVG 矢量图简介二.Android 中生成 Vector 矢量图资源三.参考资料一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
微信小程序背景图设置不生效的问题
技术栈: unIAPP + uview 组件库开发微信小程序时候发现设置背景图片不生效 ,查资料得知,背景图需要使用网络地址或者base64格式解决方法如下思路使用定位实现父盒子使用相对定位 ...
CSS3 背景图插入 SVG 或图片 base64
css3 有个冷门功能可以样式里直接写入图片不需要引用外部图片,而是直接在样式里写 data:image/svg+xml;charset=utf-8,<svg xmlns="htt ...
svg去掉黑色自带背景图
从网页中打开背景图,找到黑色背景块的dom元素,如下这样: rect就是黑色背景图的元素然后从代码中找到这一行元素,推荐使用sublime_text3,如果没有可以打开的程序的话,使用记事本也可以打 ...

css3 svg 背景图 data:image/svg+xml;base64

css3 svg 背景图 data:image/svg+xml;base64相关推荐

最新文章

热门文章