css内嵌image

在RFC中，完整的语法定义如下。 

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data 
mediatype := [ type "/" subtype ] *( ";" parameter ) 
data := *urlchar 
parameter := attribute "=" value 
urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。 

parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。 

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB 
这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。

 

data:,<文本数据> 

data:text/plain,<文本数据> 

data:text/html, 

data:text/html;base64, 

data:text/css, 

data:text/css;base64, 

data:text/javascript, 

data:text/javascript;base64, 

data:image/gif;base64,base64编码的gif图片数据 

data:image/png;base64,base64编码的png图片数据 

data:image/jpeg;base64,base64编码的jpeg图片数据 

data:image/x-icon;base64,base64编码的icon图片数据

 

 

直接上代码吧：

 

 
 
 
 
 
 
Hello, world!