【css】路径data:image/png;base64的用法详解

原帖点这里

网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAABwCAMAAAAucH5mAAABzlBMVEUAAADGnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3GnG3Gn
G3GnG3GnG3/8MvFmmvEmWrAkmLDl2jBlWXHnW7Clmb/8s3/99L/88//8Mr/+9f/+dXBlGP//Nn/+NP/9dDJn2/978nGnW7/9dHLo3TJoHK/kWHnzaTauY3WqnjRpnX/+db87Mbw2bHTqHbEmGj//9zfwZfOp3n//tr56MLx3bbs1Kzp0KjixZvevpPWtIfVsYXTr4LLoXH//+D05cD14brt1a3YtorRrH/PqXtgPiMwEAD35L3u167ezKrjyJ6heVFYNx5HJg8sCwD/+9b76sT458Dz37jOvJvbu4/O
o3KWb0lSMhsmBQD//+fYxqTlyaDcsH2qgliac0yJYz9LKhNAIAo6GATl07DEr466pYWljXCIblSRa0ZyUTVmRiu1n4C1nn/QqXy1jGDJSRjyAAAAOHRSTlMA8A8FulkskyAL+IVzQzLs18S/mj86/eK0sH1h6efcy5aKd1Ea+vTarI5sTEcm0Kqmn4BmFKeiEoxL+bYAAAemSURBVGjevdpnU9swGAdwB8ps2WUWWqDQAt378XYc29mbDFL2XmV0Ad17791vW7shl4SiSC6X/N5wx8X3j2TJjyyFQqg
4dKbZYqntb6TIlRiXnC6rosw5VAvbOisoMtWnYdu+UjNR+wGA4fkEY1xZTBbVnryG1a+pOWkqyitIAb9b4EWALopAxWE9Skj4/aI9IUJTNWlUIwDY/aExz71bDO+FynKSTgfw2kcmYp6l4YTkhdpiwqx6PWok5vDZfKM3jC7pTn33U1UlA/vLzp1p2dd6qaG/7cLRxp6K9DXCiMfhssmjywwLcIDwJgOwzLhDoWnaJocFgLP6P0tL+uvaj8EOTZbmlraTPRRVXAOMNOnQL1GsjikO4AhZ1gEAYcZlpQ
3RkH5d35Xz9ZWA1tFXUm4B1n3dRxu0e2ICKk8RZZUB2Id9ySzthZ5l6QCcjkpgxSWZNrg8qwLAQeKssPw3y+aalYAQI7wYpQ3OuwGeNKsbgA+MqUbU6KTEACnJH1P1b2i9OskB9JL1YSkACCtjTs1pm2R5ICbaR+7LTk1eFnnisUG1GGH+4dCtOYkXwQQBwqFQmJW8ABcIs3osAMDbOU7vQHNYgeMEFgBaKVJVNbA39RUUsfL+yj0kHb9AmdGzl5btMxVVcRr2ostMVifszQkTxRxMEkXIYrlIGlXcDFkeDb4cdEMaY4AMkcHBITdk6iQvyxkY99Dvb2tvxAgDSQKn13lW4ngvJLmHbq+tfZ2PZMU3Eo7BrDIlDt5+/35za4ONgIHn/A9Dyzcmbs1AkNn+wOP1d5tba/wQY34sdmZFRW5vPQlGXq9viEYvcfOhWNQpy7LmXJxOCKCLvFpfc0cer7/lH5lu2MWsqTXPvtsUB+dfPn76ZlCPmh1z+BTnwiit0Fo0Luph4tDGOqN/4PbT75HMe3aWJOsCZHKzb17pIe75r6/mgZvxRWnlzuLnB9rfYn89IIii+Pr2kHFXXz92i5DWS7IiqoMdQ+MRo/8RBx+BfdXjVGjZ8+3pu5tXaT3NMc7zAEPJGxWJQJZuguqFmDsiJPj7Dj3h6s+n77c+PqMNjmEOMceIKlgboHDXNGNhsPB5a31Tb5fBNxZIAEJTKUEXIjDssqYYS5fFBz+eGFkGeZoDlAFsNbEAAu+/66J1iu8ZvfF8O0udCAICvl4eBRRpjrYlA+58eJLK0u4zLCBYijBZXYAiXLNakwGjNzc+pPrweoAHlCrcWh6bpdxZ+LR585lTwWa15Y4qasf2ofr8+9snb78s+mhdNEcfwiXcewNSYntsqB+/PBj/tPZgITk2OEA68t9VkuEnoorRh/LC1TsLrpjRoVb5oR2Qmosw7yho3Iw+l40AoyudNsWIHctxu3DvKl2AxvLjKp3NMc0xgNaIeUdBE4WRmKZkRcUlFpBw7yrnIBdu1qalk6yOJb2mAAJ2gpW2Qy5McG5RdSZntE1zLoPgBSTMdkXRYcDg3C/GnA7NGXXYlsK8JEJuDeiss4AlcYHwrcmJyalZhmO9/78oPQgk2CDHs1LQzgCBw6gXFtJFPMOyDBDaj9p6yQNLz64r61rIh/OIKpkPNVcQlSsfDiCqST7U/pvVAHtE/lQs6oA9In94nIC8qdlZMi9D/pTs6MIayJ9LiMmVDx1FeRqF+Jp5GvIoe1F6qhfyqR6xLMyHY0UZ1eQ45Ne+g6nx3gd515QsLcV1UAjdyR2hwmjUX1p7oTDqC9YsXSl1BAqlm7JAobRSUDC1BcxqL2CWpYBZzQXMqqOaoVAaqBYwiRX+khgwqcRk6fKyQWZk5uF0eM7Pc+bSLBdNvZ54GU6cjntcOtvY5KwkgAn9xmEXkBJ54eE9Vdt+N1fl+KqJph3+W5u7SVsl8SGnRqcoNtUTDrKkPVid2hgiwvNxh5XOJGvThC1rL03t/h8jG38hPSqLIsvXgkCiNfP3EHjcdFSP2kH2+O1AoCxj7xpP8Huc9D8UdZloog3gd6HSGHtIpXdh9c1wXsA6SaUMABY/EnPRu1HjAr5hx8ozzjWwuCmN3pXN+it1x4h2Y4uPY7tQGlfp3anDHPnQ0HVhR8aqx4XIkuMMCxhVZna9gteiNILrbgCXdThrH7EWNwqnVFSWjV6RTO0TdWOyEiEnKstqDWMGR285/rwhjWVuyMgs3zAm6yxiYx6RBXF0ljyVzsIeuuGHPQvjyCxanuJMbldWYduF7kMOvw1L3osMP4keG7awAGjHqs2eOXDDDvSYX+Vz3KyTqN8cINlXrYjnhqKN53huWNJR5N0o3HAgulANo29XRyOFdLQSEKT0uU220Rvo85u6HiqHg8ihr5/bqLvcrNGlgISqlX0VmAPLziZU2MqSmj0Y9VWbPAGoQVhziMI62IIKE6cWtajsc9kMLp+s2savSYhWWfrLKRLVnYgZHRRnbsXvxTwexeOJXZ8YXpEQy8PKAWwSdmHFByXGPbIyNzu34hdZO/KkqI0i1wgoDMPykoHPcX5zvJgyoQX2ooQyo3zHRKuvOn
HoQFtX57nLfa0t+wytrWcuN5TtbxsoOblzVtaRJKAfIdUmTop7Syks9JPYgpkqxQ2ZHz5BmXa0pQMMTUfKTlE4J/qak0m1DehW/QFikf16BefOGgAAAABJRU5ErkJggg==

那么这是什么呢?这是Data URI scheme。

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

在上面的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(‘wg.png’));

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

<img src=“http://www.aimks.com/images/wg.png”/>

也可以这样显示:

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEU
gAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZS
BJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR
0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1C
KSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjz
MVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值