data:image/png…;base64用法

时间:2022-05-29 01:32:02 阅读: 最新文章 文档下载
说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

很多新手网站长都在问:data:image/png;base64、data:image/jpg;base64、data:image/gif;base64后面跟一串编码不知道是什么意思?可能我们在一些大型的项目CSS或HTML文档中就会看到类似这样的:src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 图片显示方式,下面小编就给大家介绍下:data:image的用法。

data:image/png…;base64用法

Data URI Scheme data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。常用于将图片嵌入网页。

如何使用:data:image

.CSS
 

p {
    background: url(data:image/gif;base64,R0lGOD......jIQA7)
    no-repeat left center;
    padding: 5px 0 5px 25px;
}



 

p {
    background: url(fakepath/image.gif)
    no-repeat left center;
    padding: 5px 0 5px 25px;
}


HTML
 

<img src="/static/wddqxz/img/default/default.png" data-src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />



 

<img src="/static/wddqxz/img/default/default.png" data-src="fakepath/image.gif" />


语法:
 

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
data的一些类型:
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图片数据


好处:
减少HTTP请求
浏览器兼容性:
IE7及以下不支持。有如下解决方案
使用IE条件注释

 <!--[if lt IE 8]>
    ...... IE7及以下内容 ......
<![endif]-->
* CSS Hack
*background-image:url(sprite.png); /* Only IEv6 & 7 see this */


你还应该知道的:
转化之后的图片代码通常比图片本身要大。
IE8支持的最大内嵌图片代码为32768个字节
以data形式插入图片不是万能的,很多情况下,插入一张图片反而易于修改和维护。

本文来源:https://www.wddqw.com/K7Hh.html