博客

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

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