插入图片新方式：data:image

我们在使用<img>标签和给元素添加背景图片时，不一定要使用外部的图片地址，也可以直接把图片数据定义在页面上。对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。

 

如何使用

.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="https://img-blog.csdnimg.cn/2022010619241171178.jpeg" />

或

<img 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 */

 

你还应该知道的：

l  转化之后的图片代码通常比图片本身要大。

l  IE8支持的最大内嵌图片代码为32768个字节

l  以data形式插入图片不是万能的，很多情况下，插入一张图片反而易于修改和维护。

 

转载于:https://www.cnblogs.com/gsk99/p/9050706.html