1. 背景
如果你需要在html中引入一张外部图片，你可能会这样做：
<div style="width: 8.8rem; height: 14.774rem; background-image: url('https://imagesXXXXXXXXXX'); background-size: cover; border-radius: 0.29rem;" >
如果你将引用的图片保存到本地，你可能会这样做：
<div style="width: 8.8rem; height: 14.774rem; background-image: url(/image/XXX.png); background-size: cover; border-radius: 0.29rem;" >
但是，如果网络延迟较高，或者在jar包中运行Java项目时无法根据路径顺利找到图片呢？
那么，将图片的base64编码直接写入html文件便是最好的选择！
2. 将图片进行base64编码
如何将一张图片进行base64编码呢？可以参考我的另一篇文章：使用base64对图片进行编码、对byte[]进行编码
3. 将图片的base64编码写入到css
我们可以这样将图片的base64编码写入到html文件：
<div style="width: 8.8rem; height: 14.774rem; background-image: url(data:image/png;base64,base64编码的png图片数据); background-size: cover; border-radius: 0.29rem;" >
如果是一张gif图片呢？我们可以这样：
<div style="width: 8.8rem; height: 14.774rem; background-image: url(data:image/gif;base64,base64编码的png图片数据); background-size: cover; border-radius: 0.29rem;" >
简单地说，base64就是把一些 8-bit 数据翻译成标准 ASCII 字符；
以下是css支持的格式：
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图片数据
如果对你有帮助，欢迎点赞评论收藏～
