将图片的base64编码直接嵌入到html文件的css中

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

如果对你有帮助，欢迎点赞评论收藏～