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

来源：互联网发布：布林线指标源码编辑：程序博客网时间：2024/06/05 20:47

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

.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的图片而已！！

0 0