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,<HTML代码> 

data:text/html;base64,<base64编码的HTML代码> 

data:text/css,<CSS代码> 

data:text/css;base64,<base64编码的CSS代码> 

data:text/javascript,<Javascript代码> 

data:text/javascript;base64,<base64编码的Javascript代码> 

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图片数据

 

 

直接上代码吧:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<style type="text/css"> 
.title { 
background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D); 
background-repeat:repeat-x; 
height:28px; 
line-height: 28px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div class="title">Hello, world!</div> 
</body> 
</html> 

你可能感兴趣的:(image)