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

本篇文章主要介绍了"css3 svg 背景图 data:image/svg+xml;base64"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 看到一个关于下拉菜单的样式 .search_form select {-webkit-appearance:none!important;-webkit-bor...

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

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

以上就介绍了css3 svg 背景图 data:image/svg+xml;base64，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_127867.html