ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> CSS教程 >> css3 svg 背景图 data:image/svg+xml;base64

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

来源:网络整理     时间:2015-04-17     关键词:

本篇文章主要介绍了"css3 svg 背景图 data:image/svg+xml;base64",主要涉及到方面的内容,对于CSS教程感兴趣的同学可以参考一下: 看到一个关于下拉菜单的样式 .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 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,包括了方面的内容,希望对CSS教程有兴趣的朋友有所帮助。

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

相关图片

相关文章