Css中路径data用法

清疚 2021-07-04 13:41 481阅读 0赞

`Data URI scheme`是在`RFC2397`中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

--------------------

## `Data URI scheme` ##

相信有人会注意到这种情况，网页上面有些图片的`src`或者`css`背景图片的url后面跟了一大串字符，比如下面代码：

这是为什么呢？这是`Data URI scheme`。

`Data URI scheme`是在`RFC2397`中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件导入。  
比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到他了，一张`1×36`的淡蓝色`png`图片。

在上面的`Data URI`中，`data`表示取得数据的协定名称，`image/png`是数据类型名称，`base64`是数据的编码方法，逗号后面就是这个`image/png`文件`base64`编码后的数据。

目前，`Data URI scheme`支持的类型有：

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

`base64`简单地说，它把一些`8-bit`数据翻译成标准`ASCII`字符，网上有很多免费的`base64`编码和解码的工具，在`php`中可以使用`base64_encode()`进行编码，如：

echo base64_encode(file_get_contents('lbm.png'));

目前，`IE8、Firefox、Chrome、Opera`浏览器都支持这种小文件签入。  
举个图片的例子：  
网页中一张图片可以这样显示：

也可以这样显示：

**我们把图像文件的内容直接写在了`HTML`文件中，这样做的好处是，节省了一个`HTTP` 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。**